gpt4 book ai didi

javascript - 使用 Controller 更新数据时,angularJS $watch 在指令中不起作用

转载 作者:行者123 更新时间:2023-12-02 15:19:43 25 4
gpt4 key购买 nike

我有一个自定义指令,并且还有一个将数据绑定(bind)到指令的 Controller 。

我从服务器部分获取数据并将其绑定(bind)到指令。但是,我发现当我更改作用域变量时,页面上的指令数据不会更新

这是我的代码

指令:

angular.module('MyApp')
.directive('stats',function() {
return {
templateUrl:'scripts/directives/dashboard/stats/stats.html',
restrict:'E',
replace:true,
scope: {
'comments': '@',
'number': '@',
'name': '@',
'colour': '@',
'details':'@',
'type':'@',
'goto':'@'
},
link : function($scope,element,attr){
$scope.$watch('number', function(oldValue,newValue) {
console.log(attr);
}, true);
}

}
});

指令模板:

<div class="col-lg-3 col-md-6">
<div class="panel panel-{{colour}}">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-{{type}} fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">{{number}}</div>
<div>{{comments}}</div>
</div>
</div>
</div>
<a href="{{goto}}">
<div class="panel-footer">
<span class="pull-left">查看详情</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>

Controller :

'use strict';
angular.module('MyApp',['ngResource'])

.controller('MainCtrl', function($scope,$state,MyService) {
$scope.result = {};
var names = MyService.get({classtype:'getNames',start:'',end:''},function(){
$scope.pages = names.data;
if (typeof($scope.pages[0]) === 'undefined'){
$scope.selectedItem = 'loading...';
}else{
$scope.selectedItem = $scope.pages[0].name;
}
var res = MyService.get({classtype:'getLastRes',seriesName:$scope.selectedItem},function(){
$scope.result = res;
});

});
$scope.dropboxitemselected = function(item){
$scope.selectedItem = item;
var result = MyService.get({classtype:'getLastRes',seriesName:item},function(){
$scope.result = result;
});
//$scope.result = {};
};



});

HTML:

<div class="row" ng-controller="MainCtrl">

<stats number="{{result.score}}" comments="score" colour="primary" type="heartbeat" goto="#/res/{{result._id}}"></stats>
<stats number="{{result.totalSize}}" comments="size" colour="primary" type="file-code-o" goto="#/res/{{result._id}}"></stats>
<stats number="{{result.count}}" comments="count" colour="red" type="file-text" goto="#/res/{{result._id}}"></stats>

</div>

我的页面上有一个下拉框,当我通过 Controller 中的函数 dropboxitemselected 更改项目时,需要刷新指令中的数据,我该怎么办?

最佳答案

我认为这是因为作用域绑定(bind)的原因,您应该使用“=”进行双向绑定(bind)而不是“@”。

scope: {
'number': '=',
},

并在 HTML 中删除数字中的括号。

<stats number="result.score" comments="score" colour="primary" type="heartbeat" goto="#/res/{{result._id}}"></stats>

关于javascript - 使用 Controller 更新数据时,angularJS $watch 在指令中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34172216/

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