gpt4 book ai didi

javascript - AngularJs 指令 - 属性范围变量不绑定(bind)

转载 作者:行者123 更新时间:2023-11-30 07:39:23 24 4
gpt4 key购买 nike

伴随plunker (在 coffeescript 中,但在下面是 javascript)

我无法在指令中绑定(bind)属性范围变量 (@)。

指令代码如下:

app.directive('myDirective', [
function() {

var compileFn, config, linkFn;

linkFn = function($scope, element, attr) {
return alert("foo: " + $scope.foo);
};

compileFn = function() {
return linkFn;
};

return config = {
compile: compileFn,
scope: {
foo: '@myDirectiveFoo'
}
};
}
]);

和 HTML:

<span my-directive my-directive-foo="bar"></span>

我希望提醒的值是“bar”,但它是未定义的。我错过了什么?

最佳答案

简答:要在您的link 函数中获得期望值foo,您必须观察属性:

attr.$observer('myDirectiveFoo', function(value){
console.log(value);
console.log($scope.foo);
});

两个控制台输出都会为您提供预期的 bar 值。为什么?必须对属性值进行插值,这将在调用链接函数后发生。

长答案:传递给链接函数的 attr 对象的文档说明:

Use $observe to observe the value changes of attributes that contain interpolation (e.g. src="{{bar}}"). Not only is this very efficient but it's also the only way to easily get the actual value because during the linking phase the interpolation hasn't been evaluated yet and so the value is at this time set to undefined.

让我们看一下您示例的修改版本。它还显示了 =@ 范围之间的差异。

这是我们的 html:

<body ng-controller="MainCtrl">
<span my-directive my-directive-foo="hello {{name}}" my-directive-bar="name" ></span>
</body>

这是 Controller :

app.controller('MainCtrl', function($scope, $timeout, $interpolate){
$scope.name = 'roy';
$timeout(function(){
$scope.name = 'michael';
},4000);
});

如您所见,我们有一个 name 属性,它将在 4 秒后从 roy 变为 michael

这是指令:

app.directive('myDirective', function() {
return {
scope: {
foo: '@myDirectiveFoo',
bar: '=myDirectiveBar'
},
link: function ($scope, iElement, iAttrs, controller) {
console.log('link foo: '+$scope.foo);
console.log('link bar: '+$scope.bar);
iAttrs.$observe('myDirectiveFoo',function(value){
console.log('link observed foo: '+$scope.foo, value);
});
$scope.$watch('bar', function(newValue, oldValue){
console.log('watch', oldValue, newValue);
});
console.log('link done');
},
controller: function($scope){
console.log('controller foo:'+$scope.foo);
console.log('controller bar:'+$scope.bar);
}
};
});

我们有两个独立的作用域属性。 foo 配置为单向绑定(bind),bar 配置为双向绑定(bind)。在 Controller 输出中我们将看到,双向绑定(bind) ($scope.bar) 立即可用,而单向绑定(bind) ($scope.foo) 不可用。在链接函数中,我们得到了相同的结果。如果链接完成,我们将看到观察者和观察者将以当前(和预期)值触发。如果 name 属性在 4 秒后更改了它们的值,则观察者和观察者将再次触发。

观看直播 @ PLUNKR

关于javascript - AngularJs 指令 - 属性范围变量不绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21310584/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com