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>

簡単に言えば、提供されている例のように、最初のドロップダウンは正常に機能します。ただし、2 番目のドロップダウンは何もしません。そのコードはコントローラーからビューに渡され、そのまま配信されますが、ドロップダウンはドロップしません。

誰かが以前にこの問題に遭遇したことを教えてください。

4

2 に答える 2

2

「コンパイル」ディレクティブを作成できます。これは、html (ソースに関係なく) を受け取り、それを $compile します。したがって、ビューには次のもののみが必要です。

<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 に答える