如何在隔離範圍的指令中使用ng-repeat？

Question

我想在具有隔離範圍的指令中使用ng-repeat，但似乎無法使其工作。

當我添加一個隔離範圍到我的指令，ng-repeat似乎無法看到items，據我所知。

然而，即使我用=分離範圍，我得到錯誤信息：

Error: Syntax Error: Token 'Object' is unexpected, expecting []] at column 9 of the expression [[object Object],[object Object],[object Object]] starting at [Object],[object Object],[object Object]].

這裏是NG-重複的指令工作，沒有分離範圍的jsfiddle：

http://jsfiddle.net/urlology/DA47k/3/

並使用=分離範圍：

http://jsfiddle.net/urlology/CL4AT/11/

我在做什麼錯？

Answer 1

看起來好像在抱怨你的模板。

通過做'<li data-ng-repeat="item in ' + scope.items + '">'你實際上是將scope.items轉換爲字符串。你不想要那個，你想讓它通過你的物品數組中的物品。

所以，你會怎麼做：'<li data-ng-repeat="item in items">'

你已經通過scope屬性添加項目到你的範圍：

scope: { 
    items: "=", 
    itemLabelField: "@" //read below 
} 

這足以解決您的問題，但正如你所知道的，我我也添加了itemLabelField，所以你不需要使用var itemLabelField = attrs.itemLabelField。 @ binder通過值綁定，而不是父級的範圍。

因此，您可以代替'{{item.' + itemLabelField + '}}''{{item[itemLabelField]}}'。

現在你會發現你的鏈接函數只有一個帶有編譯的純字符串模板。理想情況下，您將使用模板屬性，而不是在元素內手動插入代碼。

template: 
    '<ul>' + 
     '<li ng-repeat="item in items">' + 
     '{{item[itemLabelField]}}' + 
     '</li>' + 
    '</ul>' 

你甚至可以把它放在一個單獨的文件中並使用templateUrl屬性。

以下是完整的更改代碼：http://jsfiddle.net/DA47k/12/

var app = angular.module('myApp', []); 

app.controller('myCtrl', function ($scope) { 
    $scope.open = false; 

    $scope.items = [ 
     { name: 'A', value: 1 }, 
     { name: 'B', value: 2 }, 
     { name: 'C', value: 3 } 
    ]; 
}); 

app.directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      items: "=", 
      itemLabelField: "@" 
     }, 
     template: 
      '<ul>' + 
       '<li ng-repeat="item in items">' + 
        '{{item[itemLabelField]}}' + 
       '</li>' + 
      '</ul>' 
    } 
}); 

而只是爲了補充，一致性兼用的一個NG-XXXX或數據-NG-XXXX（或NG：XXXX）的屬性，而不是將它們混合。

Answer 2

以下是使用隔離範圍的工作示例。

http://jsfiddle.net/DA47k/6/

，您只需要在物體傳遞到與「=」隔離範圍，那麼您可以在使用點符號模板訪問它的屬性，而不是通過他們在一個新的屬性。

app.directive('myDirective', ['$compile', function($compile) { 
return { 
    restrict: 'A', 
    scope: { 
     items: '=' 
    },  
    link: function(scope, element, attrs) { 

     var template = 
      '<ul>' + 
       '<li data-ng-repeat="item in items">' + 
        '{{item.name}}' + 
       '</li>' + 
      '</ul>'; 

     // Render the template. 
     element.html('').append($compile(template)(scope)); 
    } 
} 
}]);