我有以下指令帮助我从数字中分割小数,并在我的视图中以不同的样式显示它。事情是,当值改变时它不会更新。
我多次使用此指令以查看与货币相关的查看货币。
这是指令:
app.directive('money', function(){
return {
restrict: 'E'
, scope: {
money: '@'
}
, controller: controller
, controllerAs: 'dvm'
, bindToController: true
, template: '<h2><sup>$</sup>{{ dvm.dollar }}<sub>.{{ dvm.cents }}</sub></h2>'
};
function controller(){
var parts = parseFloat(this.money).toFixed(2).split(/\./);
this.dollar = parts[0];
this.cents = parts[1];
}
});
我根据用户选项多次更新值,因此每次用户选择选项时都会重新计算这些值。
目前,重新计算这些值时不会更新这些值。解决这个问题的更好方法是什么?
答案 0 :(得分:1)
基本上,您需要添加一个link
函数来监视您的模型并应用任何更新:
https://jsfiddle.net/5d7ta5rb/
HTML
<div ng-app="myModule" ng-controller="cont">
<input ng-model="myMoney" type="number">
<money ng-model="myMoney"></money>
</div>
的JavaScript
var app = angular.module('myModule', [])
app.controller('cont', function($scope) {
$scope.myMoney = 0;
})
app.directive('money', function() {
return {
restrict: 'E',
scope: {
ngModel: '=' //bi-directional binding
},
template: '<h2><sup>$</sup>{{dollars}}<sub>.{{cents}}</sub></h2>',
link: function(scope) {
scope.dollars = 0;
scope.cents = 0;
scope.$watch('ngModel', function(newval) {
if (newval) {
var parts = parseFloat(scope.ngModel).toFixed(2).split(/\./);
scope.dollars = parts[0];
scope.cents = parts[1];
}
});
}
}
});