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">&nbsp;|&nbsp;{{ 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">&nbsp;|&nbsp;{{ 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

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -