javascript - Angularjs templateUrl vs template scope issue -


i ran strange behaviour on angular. when creating directive if use

 mod.directive('test', [function(){      return {          restrict: 'e',          templateurl: '/test/test.html',          transclude: true,          controller: ['$scope',function($scope){              //$scope equals containing scope of directive. why???          }]      };  }]); 

$scope same scope (not inherited) containing scope of directive.

but if create directive as

 mod.directive('test', [function(){      return {          restrict: 'e',          template: '<div><div ng-transclude /></div>',          transclude: true,          controller: ['$scope',function($scope){              //$scope new. inherited container scope          }]      };  }]); 

only difference template vs templateurl. "templateurl" 1 uses parent scope "template" 1 creates new scope. dont understand why. angular bug?

thanks already

edit: using angular 1.3.0-beta.7

big-edit: using directive on same element @estus mentioned.

<test other-directive></test> 

other-directive defined scope:true. doesn't create new scope when used templateurl on test directive.

edit: sample plnkr http://plnkr.co/edit/kghah1rvwfe6tsw85cog?p=preview (templateurl)

plnkr -> http://plnkr.co/edit/axiye1ksbmr8dp9nd8tl?p=preview (template)

this confusing expected behaviour directive asynchronously loaded template (via templateurl):

because template loading asynchronous compiler suspend compilation of directives on element later when template has been resolved. in meantime continue compile , link sibling , parent elements though element had not contained directives.

to around issue use priority compile directive new scope in first place:

app.directive('directiveone', function () {      return {          restrict: 'e',          templateurl: 'directive-template.html',          transclude: true,          controller: ['$scope', function($scope){          ...          }]      }; });  app.directive('directivetwo', function () {      return {          priority: 100,          scope: true     }; }); 

Comments

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

html - Missing border-right in select on Firefox -

python - build a suggestions list using fuzzywuzzy -