У меня есть код, который работает на AngularJS версии 1.2.1 и более ранних, но не работает на некоторых версиях после 1.4.8. Я хотел бы исправить код так, чтобы он работал с более поздними версиями.
Данные из массива children передаются из родительской директивы детям, а затем внукам путем нарезки массива и передача подмассива как атрибута в дочернюю директиву с использованием изолированного контекста (см. jsfiddle ниже).
Я передаю второй массив sr c вместе с первым. У него одинаковые размеры, и я тоже нарезаю его. В результате я хочу, чтобы соответствующие элементы массивов совпадали в конце. Это происходит с AngularJS <= 1.2.1, но не с AngularJS> = 1.4.8.
var app = angular.module('myApp', [])
.controller("myCtrl", ["$scope", function($scope) {
console.log("main controller");
}])
.directive('parent', ['$compile', function($compile) {
return {
bindToController: {
children: '@',
src: '@',
},
controllerAs: 'parentCtrl',
replace: false,
template: '<ng-component ng-repeat="child in children"><child child="child" src="src[$index]"></child></ng-component>',
controller: ["$scope", "$location", "$http", function($scope, $location, $http) {
console.log("parent controller");
$scope.children = [['1','2'],['3','4']];
$scope.src = [['a','b'],['c','d']];
console.log($scope.children);
}],
};
}])
.directive("child", function() {
return {
restrict: 'E',
template: '<ng-container ng-repeat="grandchild in child"><grandchild grandchild="grandchild" src="src[$index]"></grandchild></ng-init></ng-container>',
replace: true,
require: '^parent',
scope: {
child: '=',
src: '=',
},
controller: ["$scope", function($scope) {
console.log("child directive called");
console.log($scope.child);
console.log($scope.src);
}],
};
})
.directive("grandchild", function() {
return {
restrict: 'E',
template: '<p id="{{grandchild}}">{{grandchild}}:{{src}}</p>',
replace: true,
require: '^child',
scope: {
grandchild: '=grandchild',
src: '=src'
},
controller: ["$scope", function($scope) {
console.log("grandchild directive called");
console.log($scope.grandchild);
console.log($scope.src);
}],
};
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<html ng-app="myApp" ng-controller="myCtrl">
<body>
<div parent></div>
</body>
</html>
https://jsfiddle.net/cdurden/72buxvLj/17/