嵌套的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

用AngularJS"如果我有jQuery的背景?

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上搜索如何在AngularJS中思考如何使用jQuery背景来写一篇好文章。稍后将在这里添加一个示例。

Answer 2

这里的缺陷是在我的ng-repeat(特别是inner -repeat)中使用了track by $index。