gpt4 book ai didi

javascript - angularjs:如果通过指令调用服务,则 $watch 不会触发更新的服务变量

转载 作者:行者123 更新时间:2023-12-01 03:36:01 25 4
gpt4 key购买 nike

当我使用 Controller 函数更改服务变量时,$watch 会触发,但当指令更改同一变量时,它不会触发。

<html>  
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script>
var mainApp = angular.module('mainApp', []);


mainApp.service ("service1", function () {
this.x = 0
this.add = function () {
this.x += 1;
}
this.display_x_value = function () {
alert (this.x)
}
})



mainApp.controller ( 'c1', function ($scope, service1) {

/////// Add 1 to service1.x
$scope.add = function () {
service1.add ();
}

////// display the value of service1.x
$scope.display_value = function () {
service1.display_x_value ();
}

///// watch service1.x
$scope.$watch ( function () {
return service1.x
},
function (newVal, oldVal, $scope) {
alert ("watch has triggered : " + newVal)
}, true )


});





mainApp.directive ("testDirective", function (service1) {
return {
link: function ($scope, element, attrs) {
element [0].onclick=function () {
service1.x = service1.x + 2000
}
}

}
})


</script>

</head>
<body ng-app="mainApp" ng-controller="c1">
<button ng-click="add ()">change service1.x BY CONTROLLER</button>
<button test-directive> change service1.x BY DIRECTIVE </button>
<button ng-click="display_value ()"> display service1.x </button>

</body>
</html>

我知道指令确实更改了变量,因为函数 service1.display_x_value 显示了更改。奇怪的是,如果变量之前发生过变化,调用这个函数会导致 $watch 触发。

我尝试通过调用指令中的 Controller 函数来更改变量,但这也不起作用:

mainApp.directive ("testDirective", function (service1) {
return {
link: function ($scope, element, attrs) {
element [0].onclick=function () {

$scope.add ()
};


}
}
})

最佳答案

点击事件不会触发摘要循环使用$scope.$apply()

    mainApp.directive ("testDirective", function (service1) {
return {
link: function ($scope, element, attrs) {
element [0].onclick=function () {
service1.x = service1.x + 2000
$scope.$apply()
}
}

}
})

关于javascript - angularjs:如果通过指令调用服务,则 $watch 不会触发更新的服务变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44288660/

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