Question

我在角度上遇到了一种奇怪的行为。当我使用

创建指令时

 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与包含指令范围的范围相同（不是继承）。

但如果我创建指令

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

唯一的区别是模板与templateUrl。＆＃34; templateUrl＆＃34;一个使用父范围，但＆＃34;模板＆＃34;一个人创造了一个新范围。我不明白为什么。这可能是一个有角度的错误吗？

谢谢

编辑：我正在使用Angular 1.3.0-beta.7

Big-Edit：我正在使用与@estus提到的相同元素的另一个指令。

<test other-directive></test>

other-directive定义为scope：true。但是当它与testUrl一起用于测试指令时，它不会创建一个新的范围。

编辑：示例plnkr http://plnkr.co/edit/Kghah1rvwFE6TSw85Cog?p=preview（templateUrl）

plnkr - ＆gt; http://plnkr.co/edit/Axiye1ksBMR8dp9ND8tL?p=preview（模板）

Answer 1

对于带有异步加载模板的指令（通过templateUrl），这是令人困惑的，但expected behaviour：

因为模板加载是异步的，所以编译器将挂起关于该元素的指令的编译，以供以后在模板中使用已经解决了。与此同时，它将继续编译和链接兄弟元素和父元素，就好像这个元素没有包含任何指令。

要解决此问题，请首先使用priority编译带有新范围的指令：

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
    };
});

Angularjs templateUrl与模板范围问题

1 个答案: