У меня есть директива, представляющая группу объектов, назовем ее people.
Эта директива имеет ng-repeat в своем шаблоне, который повторяет дочернюю директиву, например. person, у которого есть атрибут выражения personGreeting, который должен оценивать его область действия.
И people, и person используют изолированную область.
Как я могу настроить эти директивы так, чтобы я мог выставить personGreeting в директиве people и оценить его в рамках директивы person?
Вот пример:
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.myPeople = [{
id: 1,
name: 'Bob'
}, {
id: 2,
name: 'Steve'
}, {
id: 3,
name: 'Joe',
}]
})
.directive('people', function() {
return {
scope: {
peopleList: '=',
eachPersonGreeting: '&'
},
template: '<ul><person ng-repeat="currentPerson in peopleList" person-greeting="eachPersonGreeting(currentPerson)"></person></ul>'
}
})
.directive('person', function() {
return {
scope: {
personDetails: '=',
personGreeting: '&'
},
template: '<li>{{personGreeting(personDetails)}}</li>'
}
})
.directive('people2', function() {
return {
scope: {
peopleList: '=',
eachPersonGreeting: '@'
},
template: '<ul><person-2 ng-repeat="currentPerson in peopleList" person-greeting="{{eachPersonGreeting}}"></person-2></ul>'
}
})
.directive('person2', function() {
return {
scope: {
personDetails: '=',
personGreeting: '@'
},
template: '<li>{{personGreeting}}</li>'
}
})<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
<h4>Here we are just using an in-line expression with ng-repeat, which works as you'd expect:</h4>
<ul>
<li ng-repeat="currentPerson in myPeople">Hello, {{currentPerson.name}}!</li>
</ul>
<h4>But what if we have custom directives, `people`, and `person`, and we want to let consumers of our `people` directive specify how each `person` should be greeted without making them override our directive's template, and also have data binding still work?</h4>
<h4>Unfortunately, this doesn't seem to work:</h4>
<people people-list="myPeople" each-person-greeting="'Welcome, ' + personDetails.name + '!'"></people>
<h4>Neither does this:</h4>
<people-2 people-list="myPeople" each-person-greeting="Welcome, {{personDetails.name}}!"></people-2>
</body>
</html>Я также начал вникать в функции компиляции, компоновки и контроллера для обеих директив, а также в службу $interpolate, и вроде бы все заработало, но все стало очень странно и беспорядочно, и я не мог заставить работать привязку данных. , так что это было похоже на напрасные усилия. Я чувствую, что это должно быть просто, но это не так.
Есть ли элегантный способ сделать это?
