Templates 提供templateUrl使得无法在指令';s控制器

Templates 提供templateUrl使得无法在指令';s控制器,templates,angularjs,angularjs-directive,Templates,Angularjs,Angularjs Directive,在angular指令中使用templateUrl时,我遇到了一些奇怪的行为 基本上,当我提供templateUrl时,我似乎无法从link函数或指令控制器访问经过计算的属性。link函数只返回未计算的表达式(例如,{{input.text}}),控制器得到未定义的 使用小提琴演示比解释更容易,因此我创建了一个非常简单的示例。打开控制台并记录输出,然后注释掉templateUrl属性,然后重新运行fiddle以查看差异。 请注意,如果将模板移出缓存并移动到template属性中,则不会发生这种情况

在angular指令中使用
templateUrl
时,我遇到了一些奇怪的行为

基本上,当我提供
templateUrl
时,我似乎无法从link函数或指令控制器访问经过计算的属性。link函数只返回未计算的表达式(例如,
{{input.text}}
),控制器得到
未定义的

使用小提琴演示比解释更容易,因此我创建了一个非常简单的示例。打开控制台并记录输出,然后注释掉
templateUrl
属性,然后重新运行fiddle以查看差异。 请注意,如果将模板移出缓存并移动到
template
属性中,则不会发生这种情况。有人能解释一下是什么原因导致了这种行为

为完整起见,代码如下:

HTML:


文本1
JS:

var myApp=angular.module('myApp',[]);
函数MyCtrl($scope){
$scope.input={};
$scope.input.text=“一些字符串”;
}
运行(['$templateCache',函数($templateCache){
返回$templateCache.put('/partials/rhombus.html',
“只是一个模板。”);
myApp.directive('dNested',function(){
返回{
排除:错误,
//注释掉下面的行以观察差异。
templateUrl:“/partials/rhombus.html”,
替换:false,
控制器:函数($attrs,$scope){
this.logAttr=函数(){
日志(“来自控制器:”+$attrs.dAttr2);
}
},
链接:函数(范围、元素、属性、ctrl){
属性$观察('dAttr2',功能(val){
console.log(“来自链接函数:+val”);
ctrl.logAttr();
});
}
}
});
更新


在下面Martin给出了一个有用的答案之后,我发现它现在可以工作了,但当指令嵌套(即一个指令被另一个指令屏蔽)时就不行了。请参见。您仍然会注意到注释掉模板url将导致正确的行为。

这似乎是您使用的角度版本中的一个错误(小提琴使用1.0.1)。如果您升级到1.0.5或更高版本,它将正常工作。

Hmm,谢谢。我将尝试升级--我目前在本地使用1.0.7,但仍然看到类似的情况。我将很快进行查看。因此,在更新版本后,它已修复了原始问题(此答案已更新),但是,当两个指令嵌套时,我仍然存在问题。请参阅我将链接到原始问题的更新的fiddle.Hm。在我看来,它像一个bug。如果使用
template
,它会正常工作,但如果使用
templateUrl
,则不会。
<div ng-controller="MyCtrl">
    Text1<input ng-model="input.text"/>
    <div d-nested="" d-attr2="{{input.text}}"></div>
</div>
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.input = {};
    $scope.input.text = "some string";
}

myApp.run(['$templateCache', function($templateCache) {
  return $templateCache.put('/partials/rhombus.html', 
                            '<span>Just a template.</span>');

myApp.directive('dNested', function(){
    return {
        transclude: false,
        //Comment out the below line to observe the difference.
        templateUrl: '/partials/rhombus.html',
        replace: false,
        controller: function($attrs, $scope){
            this.logAttr = function(){
                console.log("from controller: " + $attrs.dAttr2);
            }
        },
        link: function(scope, element, attrs, ctrl){
            attrs.$observe('dAttr2', function(val){
                console.log("from link function: " + val);
                ctrl.logAttr();               
            });
        }
    }
});