Angular 指令实例 $watch 不起作用答案

【问题标题】：Angular directive instances $watch not workingAngular 指令实例 $watch 不起作用
【发布时间】：2016-11-14 21:08:56
【问题描述】：

我有两个时间选择器输入，需要计算总和。我的指令中的代码工作正常，但是当我在页面上有多个指令时问题就来了。我尝试在指令的控制器或链接函数中设置手表，但手表只适用于最后一个实例化的指令。

我可能错过了什么？

编辑：对不起错了plunkr

这里有一个 plunkr：https://plnkr.co/edit/uC38NIbYsy9Vv3S38xHh?p=preview

指令代码：

 myApp.directive('myTimepicker', function() {
  return {
    restrict: 'A',
    scope: {
      tmodel: '=',
      ttitle: '@'
    },
    link: function(scope, $element, attr) {
      console.log(scope);
      scope.tform = scope.tmodel;
      scope.$watch('tform.on', function(newValue, oldValue) {
        // console.log("calc on"+scope.ttitle);
        _calctotal();
      });
      scope.$watch('tform.off', function(newValue, oldValue) {
        // console.log("calc off");
        _calctotal();
      });
      _calctotal = function() {

        var on = new Date(scope.tform.on);
        var off = new Date(scope.tform.off);
        var total = off.getHours() - on.getHours();
        var totalmin = off.getMinutes() - on.getMinutes();
        if (totalmin < 0) {
          total = total - 1;
          totalmin = totalmin * -1;
        }
        if (total < 0) {
          total = "Invalid";
          totalmin = "";
        }
        if (totalmin < 10) totalmin = "0" + totalmin;
        scope.tform.total = total + ":" + totalmin;

      };
      _calctotal();
    },
    controller: function($scope) {
      // console.log($scope);

    },
    templateUrl: "mytimepicker.html"
  }
});

【问题讨论】：

为什么不尝试使用 ng-change 而不是 $watch？
谢谢！我知道解决方案很简单...... ng-change 就像一个魅力......请将您的评论设置为答案，以便我可以将其奖励给您
指令中的隔离范围也可以是一个解决方案。请参阅here

标签： javascript angularjs jquery-ui-timepicker

【解决方案1】：

尝试使用 ng-change 代替 $watch，它更简洁，更易于理解。

【讨论】：

【解决方案2】：

它与您的 _calc 函数声明一起没有 var。

link: function(scope, $element, attr) {
  console.log(scope);
  scope.tform = scope.tmodel;
  var _calctotal = function() {

    var on = new Date(scope.tform.on);
    var off = new Date(scope.tform.off);
    var total = off.getHours() - on.getHours();
    var totalmin = off.getMinutes() - on.getMinutes();
    if (totalmin < 0) {
      total = total - 1;
      totalmin = totalmin * -1;
    }
    if (total < 0) {
      total = "Invalid";
      totalmin = "";
    }
    if (totalmin < 10) totalmin = "0" + totalmin;
    scope.tform.total = total + ":" + totalmin;

  };
  scope.$watch('tform.on', function(newValue, oldValue) {
    // console.log("calc on"+scope.ttitle);
    _calctotal();
  });
  scope.$watch('tform.off', function(newValue, oldValue) {
    // console.log("calc off");
    _calctotal();
  });

  _calctotal();
},

Plnkr 上的工作示例

【讨论】：