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
Post a Comment