AngularJS : directive template scope inheritance -
what correct way pass scope vars directive templates using ng-repeat? i'm trying iterate on array of data render "app" elements contain templateurls. if don't set scope : true in directive template vars empty. correct way pass vars defined in ng-repeat template without polluting scope?
// controller userapp.controller('maincontroller', ['$scope', 'mainfactory', 'credsfactory', function($scope, mainfactory, credsfactory) { var findappsdata = function() { mainfactory.findappsdata() .success(function (data) { $scope.appsdata = data; }). error(function(error) { $scope.status = 'unable data: ' + error.message; }); }; findappsdata(); }]); // directive userapp.directive('app', function(){ return { restrict : "e", scope : {}, // vars referenced in template empty. scope : true // vars inherited in template. templateurl : 'templates/app-detail.html' } }) // index.html <app ng-repeat="app in appsdata"></app> // app-detail.html <span class="rtl">{{ app.appdisplayname }}</span> <span class="rtl"> | {{ app.categoryid }}</span> <br /> <span class="rtl">{{ app.description }}</span>
working solution: http://plnkr.co/edit/qftqao?p=preview
you'll need use link function wait variables passed in when compile, , compile view then.
try this:
// directive userapp.directive('app', function($compile){ return { // staying away e, ie doesn't custom elements restrict : "a", scope : { app: '=' }, link: function(scope, element, attrs) { var delwatch = scope.$watch('app', function(newval, oldval) { // wait scope.app load if(scope.app === undefined) return; var template = ''; template += '<span class="rtl">{{ app.appdisplayname }}</span>'; template += '<span class="rtl"> | {{ app.categoryid }}</span>'; template += '<br />'; template += '<span class="rtl">{{ app.description }}</span>'; element.html(template); $compile(element.contents())(scope); // remove watcher delwatch(); }); } } }); // index.html <div ng-repeat="app in appsdata"> <div app="app"></div> </div>
Comments
Post a Comment