javascript - Angularjs templateUrl 与模板范围问题

Question

我在 Angular 上遇到了一个奇怪的行为。在创建指令时，如果我使用

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

唯一的区别是 template 与 templateUrl。 “templateUrl”一个使用父范围，而“template”一个创建一个新范围。我不明白为什么。这可能是一个 Angular 错误吗？

已经谢谢了

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

大编辑:我在与@estus 提到的相同元素上使用另一个指令。

<test other-directive></test>

other-directive 被定义为 scope:true。但在测试指令上与 templateUrl 一起使用时，它不会创建新范围。

编辑:示例 plnkr http://plnkr.co/edit/Kghah1rvwFE6TSw85Cog?p=preview (模板网址)

plnkr -> http://plnkr.co/edit/Axiye1ksBMR8dp9ND8tL?p=preview (模板)

Answer 1

这令人困惑，但 expected behaviour对于带有异步加载模板的指令(通过 templateUrl):

Because template loading is asynchronous the compiler will suspend compilation of directives on that element for later when the template has been resolved. In the meantime it will continue to compile and link sibling and parent elements as though this element had not contained any directives.

为了解决这个问题，首先使用 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
    };
});