1

我希望这对某人来说是一件容易的事，因为它让我发疯。在这里亲自体验这个问题：plnkr.co。

我想将一些 HTML 从控制器传递到视图。这是控制器，它改编自Twitter Bootstrap提供的示例：

angular.module('plunker', ['ui.bootstrap']);

function DropdownCtrl($scope) { 
    $scope.items = [ 
        "The first choice!", 
        "And another choice for you.",  
        "but wait! A third!" 
    ];

    $scope.html = '<li class="dropdown" ng-controller="DropdownCtrl">' +
                    '<a class="dropdown-toggle">' + 
                        'Click me for a dropdown, yo!' +
                    '</a>' + 
                    '<ul class="dropdown-menu">' +  
                        '<li><a>Why</a></li>' +
                        '<li><a>doesn\'t</a></li>' +
                        '<li><a>this</a></li>' +
                        '<li><a>work???</a></li>' +
                    '</ul>' + 
                   '</li>';
}

没有什么令人兴奋的，当然。这是视图：

<h3>This works fine</h3>
<li class="dropdown" ng-controller="DropdownCtrl">
  <a class="dropdown-toggle">
    Click me for a dropdown, yo!
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="choice in items">
      <a>{{choice}}</a>
    </li>
  </ul>
</li>
<h3>Why doesn't this work?</h3>
<div ng-controller="DropdownCtrl" ng-bind-html-unsafe="html"></div>

简而言之，根据提供的示例，第一个下拉菜单可以正常工作。然而，第二个下拉菜单什么也不做。它的代码从控制器传递到视图并原封不动地交付，但下拉菜单不会下降。

告诉我以前有人遇到过这个问题。

4

2 回答 2

2

您可以创建一个“编译”指令，它将获取您的 html（无论来源如何）并为您编译它。所以你的观点只需要：

<div compile="html"></div>

这会将 html 添加到页面而不是显示它（就像 ng-bind-html 一样）。它将查找并评估 html 中的所有指令和表达式。最后但并非最不重要的一点是，它将链接范围，因此您仍然可以访问控制器。

这是我从 AngularJs API 文档中提取的示例编译指令。它使用 $watch 以便在 html 更改时继续编译。

.directive('compile', function($compile) {
  return function(scope, element, attrs) {
    scope.$watch(
        function(scope) {
            // watch the 'compile' expression for changes
            return scope.$eval(attrs.compile);
        },
        function(value) {
            // when the 'compile' expression changes
            // assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current scope.
            $compile(element.contents())(scope);
        }
    );
  };
})

当然，为了简洁起见，这里是plunkr

于 2013-07-03T19:59:22.643 回答
0

您将其定义$scope.html为字符串，这意味着 angular 不会评估其中的任何内容，甚至不会在其范围内考虑它。为了获得角度来评估它以通过部分加载它。这可以通过在路由、指令或服务中定义模板来完成。也可以通过仅包含它来完成。就像我在这个plunkr中所做的那样

于 2013-06-28T21:19:13.300 回答