javascript - How to evaluate Angular expression in child directive and expose it on parent directive? -
i have directive represents group of objects, let's call people.
this directive has ng-repeat in template repeats child directive, e.g. person, has expression attribute persongreeting should evaluate on scope.
both people , person use isolate scope.
how can set these directives such can expose persongreeting on people directive , have evaluated within scope of person directive?
here example:
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 using in-line expression ng-repeat, works you'd expect:</h4> <ul> <li ng-repeat="currentperson in mypeople">hello, {{currentperson.name}}!</li> </ul> <h4>but if have custom directives, `people`, , `person`, , want let consumers of our `people` directive specify how each `person` should greeted without making them override our directive's template, , have data binding still work?</h4> <h4>unfortunately, doesn't seem work:</h4> <people people-list="mypeople" each-person-greeting="'welcome, ' + persondetails.name + '!'"></people> <h4>neither this:</h4> <people-2 people-list="mypeople" each-person-greeting="welcome, {{persondetails.name}}!"></people-2> </body> </html>i started delving compile, link , controller functions both of directives, $interpolate service, , got kind of working, got weird , messy, , couldn't data binding working, felt wasted effort. feel should simple, doesn't seem be.
is there elegant way this?
how greeting depends on user itself? there way create service knows how produce customised greeting?
if not, proxy object? https://www.youtube.com/watch?v=aio2om7b83s&feature=youtu.be&t=15m1s i've discovered yesterday and, perspective, seems fits here. should create proxy object each guest, inject guest directive , during link phase put parsed (done angular) greeting injected proxy object.
also, think you're doing can done on simpler way setting attribute outside , parsing that.
Comments
Post a Comment