gpt4 book ai didi

angularjs - 从指令中更改属性

转载 作者:行者123 更新时间:2023-12-04 13:23:17 24 4
gpt4 key购买 nike

使用 AngularJS。我有一个指令,我希望有两种方式的数据绑定(bind)。该指令将有一个名为“activate”的属性。最初,“activate”的值为“1”。

该指令的链接函数将检查“activate”是否等于“1”。如果是这样,它将“激活”更改为 0,但会做一些其他的事情。

稍后,如果我想让指令再次做一些事情,在 Controller 中,我将再次将“激活”更改为“1”。由于指令有 watch ,它会重复循环。

不幸的是,每次我这样做时,我都会得到“与指令'testDirective'一起使用的表达式'0'是不可分配的!”或“不可赋值模型表达式:1(指令:testDirective)”。

这是HTML:

<body ng-app="app">
<test-directive activate="1"></test-directive>
</body>

这是JS:
var app = angular.module('app', []);


app.directive('testDirective', function() {
return {
restrict: 'E',
scope: {
activate : '='
},


link: function( scope, elem, attrs, controller ) {
var el = elem[0];

var updateContent = function() {
el.innerText = 'Activate=' + scope.activate;
};

updateContent();
attrs.$observe( 'activate', function() {
console.log('Activate=' + scope.activate);
if( scope.activate == '1') {
scope.activate = '0'
updateContent();
}
});
}
}
});

这是在 jsFiddle 上: http://jsfiddle.net/justbn/mgSpY/3/

为什么我不能更改存储在指令属性中的值?我正在使用2路绑定(bind)。

文档说“如果父范围属性不存在,它将引发 NON_ASSIGNABLE_MODEL_EXPRESSION 异常。”

注意:更新内容正确显示“激活”的值。但是,“”中“activate”的值不会更新。

然而,这对我来说毫无意义,因为父范围属性确实存在。

有任何想法吗?

最佳答案

虽然我同意使用 $watch而不是 attrs.$observe这不是您收到错误消息的主要原因。

问题是您试图将值分配给不可分配的表达式 - 正如错误消息告诉您的那样:Non-assignable model expression: 1 (directive: testDirective)
在这种情况下,不可赋值的表达式是数字“1”

<test-directive activate="1">

您设法将初始值 (1) 传递给指令,但是当指令尝试更新该值时,属性 激活无法更改 - 因为它是一个数字。

因此,您需要做的就是将其更改为变量,以便稍后更新该值。

请参阅下面的代码,其中我通过 Controller 在 $scope 中初始化了一个名为 activate.initialValue 的变量。

而且我也用过 $watch而不是 attrs.$observe .

我添加了 $timeout只是为了模拟一个事件以在 2 秒后更改激活值。

HTML
<body ng-app="app" ng-controller="appCtrl">
<test-directive activate="activate.initialValue"></test-directive>
</body>

JS
var app = angular.module('app', []);

app.controller('appCtrl', function($scope){
$scope.activate = {
initialValue : 1
}
});

var app = angular.module('app', []);

app.controller('appCtrl', function($scope){
$scope.activate = {
initialValue : 2
}
});

app.directive('testDirective', function($timeout) {
return {
restrict: 'E',
scope: {
activate : '='
},
link: function(scope, elem, attrs) {
scope.$watch('activate', function(newValue, oldValue){
console.log('activate has changed', newValue);
});

$timeout(function(){
scope.activate = 0;
}, 2000);
},
template: "{{activate}}"
}
});

您还可以在此处查看工作 ( http://jsfiddle.net/mgSpY/63/)。

这里是关于它的 AngularJS 官方文档 ( http://docs.angularjs.org/error/ngModel:nonassign)

关于angularjs - 从指令中更改属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18667388/

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