AngularJS我的自定义指令无法访问属性,但其他自定义指令似乎可以
我有以下自定义指令模板AngularJS我的自定义指令无法访问属性,但其他自定义指令似乎可以,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我有以下自定义指令模板 .directive('myDirective', ['$controller',function($controller) { return { templateUrl: 'client/test.ng.html', scope: true, controller: ['$scope','$attrs',function($scope,$attrs){
.directive('myDirective', ['$controller',function($controller) {
return {
templateUrl: 'client/test.ng.html',
scope: true,
controller: ['$scope','$attrs',function($scope,$attrs){
console.log($attrs)
}],
transclude: true,
}
}])
该指令的调用如下所示
<my-directive view="{{view}}"></my-directive>
<ion-tab ng-if="platform != 'android'" title="{{label}}" icon-off="{{off}}" icon-on="{{on}}" href="#/tab/{{view}}">
<my-directive view="{{view}}"></my-directive>
</ion-tab>
<ion-tab ng-if="platform == 'android'" title="{{label}}" class="tab-item" href="#/tab/{{view}}">
<my-directive view="{{view}}"></my-directive>
</ion-tab>
然而,当这一领域扩大时,我们已经
$$element: jQuery.fn.init[1]
$$observers: Object
$attr: Object
class: "pane tab-content"
navView: "active"
view: "dash"
__proto__: Object
谢谢你的帮助 使用链接函数获取属性值
.directive('myDirective', ['$controller',function($controller) {
return {
templateUrl: 'client/test.ng.html',
scope: true,
transclude: true,
link: function(scope,element,attrs){
console.log(attrs);
}
}
}])
我在你的指令中看不到任何HTML,所以我删除了transclude:true
.directive('myDirective', function () {
return {
templateUrl: 'client/test.ng.html',
scope: {
view: '='
},
link: function (scope) {
console.log("view", view);
scope.$watch("view", function (newView, prevView) {
console.log("changed view", scope.view, newView, prevView);
});
}
}
})
这是一个时间问题,与指令生命周期内的某些事情何时发生及其完成的几个阶段有关。
在尽可能少的细节中,以下是阶段:
编撰
实例化控制器
预链接
后链接
请注意,将插值属性{…}解析为值发生在预链接阶段的某个时候,它也是一个角度内置指令,用于执行此操作。这意味着:
a。在控制器实例化期间不会解析这些值。
B这些值肯定会在链接后阶段解析。
C这些值可能在预链接阶段解析,也可能不解析,这取决于您的指令相对于具有priorirty 100的深奥属性插值指令的相对优先级
注意:更高的优先级意味着预链接发生得更快
如果您仔细阅读,脚本将很好地解释正在发生的事情。您能在获取视图值的地方共享脚本吗?这个脚本看起来不错$scope.$parent.view是有效的,因为在定义指令时您将scope:true设置为有效。因此,指令原型继承父指令scope@RIYAJKHAN当然,这里有一个更详细的相关问题w/plunker链接:我已经更新了。这是最后一把小提琴。感谢分享这一见解。如果在预链接之前调用模板函数,那么预链接函数如何将数据注入模板中?我重新思考了这个问题,并提供了一个plunker演示,以防您可能想帮助@Babak:模板是使用内联模板或解析模板或调用模板函数,然后用于创建包含子元素等的元素。然后,interpolate指令将在预链接阶段更改已创建元素的属性值,这意味着在此之前元素具有一些attr={{textWithCurlies}}在这之后,元素有一些attr=一个非常有意义的值。@Babak:我写了这个注释,但从未按下“添加注释”按钮,所以我还是要发布它。我会研究一下这个问题。谢谢你。在深入研究之后,似乎在链接前和链接后调用了模板函数,因此我不确定如何影响模板的渲染,因为已经对其进行了评估。
.directive('myDirective', function () {
return {
templateUrl: 'client/test.ng.html',
scope: {
view: '='
},
link: function (scope) {
console.log("view", view);
scope.$watch("view", function (newView, prevView) {
console.log("changed view", scope.view, newView, prevView);
});
}
}
})