1

アイソレート スコープを持つディレクティブで ng-repeat を使用しようとしていますが、動作していないようです。

分離スコープをディレクティブに追加すると、 ng-repeat が を認識できないように見えますがitems、これは理解できます。

ただし、=isolate スコープを使用しても、次のエラー メッセージが表示されます。

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]].

これは、isolate スコープのないディレクティブで動作する ng-repeat の jsFiddle です。

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

そして、=分離スコープを使用します。

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

コード スニペットとして:

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', ['$compile', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var items = attrs.items;
      console.log('items %o', items);
      var itemLabelField = attrs.itemLabelField
      var template =
        '<ul>' +
        '<li data-ng-repeat="item in ' + items + '">' +
        '{{item.' + itemLabelField + '}}' +
        '</li>' +
        '</ul>';

      // Render the template.
      element.html('').append($compile(template)(scope));
    }
  }
}]);
<html ng-app="myApp">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

</head>

<body ng-controller="myCtrl">

  <div my-directive items="items" item-label-field="name"></div>

</body>

</html>

私は何を間違っていますか？

4

2 に答える 2

3

分離スコープを使用した実際の例を次に示します。

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));
    }
}
}]);
于 2013-10-23T23:38:46.810 に答える