3

私が理解できないAngularに少し問題があります。スコープと関係があるのではないかと思いますが、100% 正確ではありません。

ここに私のHTMLがあります:

<i class="icon-question-sign" popover data-placement="top" data-trigger="hover" data-title="Top 10 clients" data-content-compile="<ul><li ng-repeat='client in user.clients | limitTo: 10'>{{client}}</li></ul>"></i>

これが私の指示です：

app.directive('popover', function($timeout, $compile) {
var linker = function (scope, element, attrs) {
    $timeout(function() {
        var content = $compile(element.data('content-compile'))(scope);
        element.popover({
            'html': true,
            'content': content
        });
    }, 200);
}

return {
    restrict: 'A',
    link: linker
}

});

結果は、{{user.clients}} の正しい長さまで li を正しく繰り返しますが、{{client}} をレンダリングしません。何らかの理由で、それは空白として表示されますが、文字列値があり、HTML に直接追加され、ディレクティブを介してコンパイルされていない場合に機能します。DOM での現在の外観:

<ul class="ng-scope"><!-- ngRepeat: client in user.clients | limitTo: 10 --><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li><li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"></li></ul>

{{client}} を {{user.email}} に置き換えると、正しくリストされます。

ここで何が起こっているのかわからない - おそらく明らかな何かが欠けている!

4

2 に答える 2

2

あなたの問題の鍵は、その原因です{{client}}.data-content-compileでは、ディレクティブが開始される前にコンパイルされるためclient、コントローラーのコンテキストでは未定義になります。現在、$compile に送信する文字列は次のとおりです。

<ul><li ng-repeat='client in user.clients | limitTo: 10'></li></ul>

これを防ぐには、テンプレートを別の方法でディレクティブに送信する必要があります。ここにあるいくつかの：

  1. テンプレートを文字列としてコントローラに保存します。私の意見では、かなり醜いです。
  2. テンプレートをテンプレートに保存し、$templateCache から取得します。

2番目のアプローチを使用して例を示しました:

<div ng-controller="ctrl">
    <script type="text/ng-template" id="client.html">
        <div><ul><li ng-repeat='client in user.clients'>{{client.name}}</li></ul></div>
    </script>
    <i
        popover
        class="glyphicon glyphicon-user"
        data-placement="bottom"
        data-trigger="hover"
        data-title="Top 10 clients"
        data-content-template="client.html"
    ></i>
</div>

angular.module("app", [])
.controller("ctrl", function($scope, User) {
    $scope.user = User;
})
.directive("popover", function($compile, $timeout, $templateCache) {
    return function(scope, el, attr) {
        $timeout(function() {
            el
            .popover({
                html: true,
                content: $compile($templateCache.get(attr.contentTemplate))(scope)
            })
            .popover("show")
        });    
    };
})
.value("User", {
    clients: [
        { name: "John", age: 22},
        { name: "Ann", age: 13},
        { name: "Maria", age: 62},
        { name: "Ivan", age: 44}
    ]
});
于 2013-10-18T03:36:15.173 に答える