Javascript Angular JS：值更改时更新指令

我有下面的指令帮助我将小数从一个数字中分离出来，并在我的视图中以不同的样式呈现出来。问题是，它不会在值更改时更新

我多次使用此指令在视图中显示与货币相关的货币

这是指令：

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];
    }
});

app.directive（'money'，function（）{
返回{
限制：“E”
，范围：{
钱：“@”
}
，控制器：控制器
，controllerAs:“dvm”
，bindToController:true
，模板：“${dvm.dollar}.{{dvm.cents}”
};
函数控制器（）{
var parts=parseFloat（this.money）.toFixed（2）.split（/\./）；
该美元=零件[0]；
这1.5美分=零件[1]；
}
});

我根据用户选项多次更新这些值，因此每次用户选择选项时都会重新计算这些值

---

目前，这些值在重新计算时都不会更新。解决此问题的更好方法是什么？

基本上，您需要添加一个

链接

功能，用于监视您的模型并应用任何更新：

HTML

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];
        }
      });
    }
  }
});

var-app=angular.module（'myModule'，[]）
应用程序控制器（'cont'，功能（$scope）{
$scope.myMoney=0；
})
app.directive（'money'，function（）{
返回{
限制：'E'，
范围：{
ngModel:'='//双向绑定
},
模板：“${{美元}.{{美分}”，
链接：功能（范围）{
scope.dollars=0；
scope.cents=0；
范围：$watch（'ngModel'，函数（newval）{
if（newval）{
var parts=parseFloat（scope.ngModel）.toFixed（2）.split（/\./）；
scope.dollars=零件[0]；
scope.cents=零件[1]；
}
});
}
}
});

Genius，它工作得很好，但现在我的comas不见了。例：它显示的不是10000.00美元，而是10000.00美元试图用过滤器解决|不客气！不要忘记将答案标记为“已解决”：）请不要在自定义指令的属性上使用

ng-

前缀。

ng-

前缀是为核心指令保留的。具体来说，

ng model

属性调用的实例并将其附加到元素。我一直在自己的指令中使用ngModel，以便能够使用ngModelController，例如用于

setValidity

。你能给我一个链接，提供更多关于为什么这是个坏主意的信息吗？“

ng-

是为核心指令保留的。”--。

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];
        }
      });
    }
  }
});