嵌套的 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 上搜索如何在具有 jQuery 背景的 AngularJS 中思考一个好的写上去。稍后将在此处添加示例。

Answer 2

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

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

Nested ng-repeat data not correctly binding to directive

javascript

binding

angularjs

angularjs-directive