嵌套的ng-repeat数据未正确绑定到指令

Question

[编辑反映@shaunhusain回答中的评论]

我有一个嵌套的ng-repeat构造，我想为每个内部项实例化一个新的指令实例，并将该内部项的数据传递给该指令。在下面的代码中，我包含了两个嵌套循环。工作的那个使用单向绑定通过{{}}表示法，另一个似乎也可以工作......直到你点击刷新按钮。即使$ scope.frames发生更改（并且{{}}绑定继续反映更改），也不会触发指令的绑定。

我错过了什么？

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

myApp.directive("myDirective", function () {
    return {
        restrict: 'E',
        scope: {
            boundData: '=data'
        },
        link: function (scope, element) {
           angular.element(element.find("div")[0])
                .html('')
                .append("<p>" + scope.boundData.val + "</p>");
        }
    }
});

myApp.controller('FooCtrl', ['$scope', function ($scope) {
    $scope.clear = function () {
		$(".item-list").empty();
    };

    $scope.getData = function () {
        var frames = [];
        for (var i = 0; i < 2; i++) {
            var items = [];
            for (var j = 0; j < 4; j++) {
                items.push({ val : Math.floor(Math.random() * 5000) });
            };
            frames.push(items);
        }
        $scope.frames = frames;
    };

    $scope.getData();
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="myApp">
<div ng-controller="FooCtrl">
    <div>
    <button ng-click="getData()">Refresh</button>
    <button ng-click="clear()">Clear</button>
    </div>
    <div style="float: left">
        <b>{} binding</b>
        <div ng-repeat="frame in frames track by $index">
            <div ng-repeat="item in frame track by $index">
                {{item.val}}
            </div>
        </div>
        
    </div>
    <div style="margin-left: 120px">
        <b>Using directive</b>
        <div ng-repeat="frame in frames track by $index">
            <div ng-repeat="item in frame track by $index">
                <my-directive data="item">
                    <div class="item-list"></div>
                </my-directive>
            </div>
        </div>
    </div>
    </div>
  </div>

Answer 1

"Thinking in AngularJS" if I have a jQuery background?

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

myApp.directive("myDirective", function () {
    return {
        restrict: 'E',
        scope: {
            boundData: '=data'
        },
        link: function (scope, element) {
            angular.element(element.find("div")[0])
                .html('')
                .append("<p>" + scope.boundData.val + "</p>");
        }
    }
});

myApp.controller('FooCtrl', ['$scope', function ($scope) {
    $scope.clear = function () {
		$(".item-list").empty();
    };

    $scope.getData = function () {
        var frames = [];
        for (var i = 0; i < 2; i++) {
            var items = [];
            for (var j = 0; j < 4; j++) {
                items.push({ val : Math.floor(Math.random() * 5000) });
            };
            frames.push(items);
        }
        $scope.frames = frames;
    };

    $scope.getData();
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>

<div ng-app="myApp">
<div ng-controller="FooCtrl">
    <div>
    <button ng-click="getData()">Refresh</button>
    <button ng-click="clear()">Clear</button>
    </div>
    <div style="float: left">
        <b>{} binding</b>
        <div ng-repeat="frame in frames track by $index">
            <div ng-repeat="item in frame track by $index">
                {{item.val}}
            </div>
        </div>
        
    </div>
    <div style="margin-left: 120px">
        <b>Using directive</b>
        <div ng-repeat="frame in frames track by $index">
            <div ng-repeat="item in frame track by $index">
                <my-directive data="item">
                    <div class="item-list"></div>
                </my-directive>
            </div>
        </div>
    </div>
    </div>
  </div>

相信你的问题是因为使用了一个没有指定父元素的jquery选择器。通常你在使用Angular时不需要jQuery，最好放弃它，在SO上搜索如何用AngQueryJS思考jQuery背景以获得良好的写法。很快就会在这里添加样本。

Answer 2

这里的缺陷是在我的ng-repeat（特别是内部的）中使用$ index的跟踪。