Angular JS：值更改時更新指令

Question

我有以下指令，可幫助我從數字中拆分小數並在視圖中以不同的樣式顯示它。 事實是，值更改時不會更新。

我多次使用此指令在視圖中顯示與貨幣有關的貨幣。

這是指令：

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

我會根據用戶選項多次更新這些值，因此每次用戶選擇選項時都會重新計算這些值。

當前，這些值在重新計算時都不會更新。 解決此問題的更好方法是什么？

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