AngularJS示波器手表未触发

时间:2015-02-06 00:34:33

标签: javascript jquery html angularjs

我的范围内有一个日期过滤字符串。

$scope.myModel = {date:""};

我还有一个jQuery datepicker

<input date-value="myModel.date" date-picker />

在指令内更新此字符串(使用AngularJS - Attribute directive input value change

.directive('datePicker', function ($timeout) {
  return {
    scope: {
      dateValue: "=?",
    },
    link : function (scope, elem, attrs) {
      $timeout(function() {
        elem.data('date-value', scope.dateValue);
        elem.bind('change paste', function (blurEvent) {
          if (elem.data('date-value') != elem.val()) {
            console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val());
            elem.data('date-value', elem.val());
            scope.dateValue = elem.val();
          }
        });
      });
    },

  };
});

根范围日期正在正确更新,我可以成功将其发送到服务器,但我希望在日期更改时执行某些操作。我的函数在页面初始化时调用一次,然后再也不会再执行。

$scope.$watch("myModel.date", function(newVal, oldVal) {
  console.log("newVal: " + newVal + '  oldVal:' + oldVal);
  if (newVal == oldVal) {
    return;
  }
  // do something 
});

我在这里做错了什么?

2 个答案:

答案 0 :(得分:1)

我在其他一些堆栈溢出帖子中读到你可以通过scope.apply()强制检查你的作用域,但我的摘要中的作用域与我的控制器中的作用域不同。所以这有效,但我不太了解角度和摘要来解释原因。

elem.bind('change paste', function (blurEvent) {
          if (elem.data('date-value') != elem.val()) {
            console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val());
            elem.data('date-value', elem.val());
            scope.dateValue = elem.val();
            if (!scope.$$phase) {scope.$apply();}
          }
        });

无论如何,这似乎太复杂了,当我在选择之前点击进入框中时,元素绑定就会触发。我最终在jQuery datePicker params上的onClose上设置了一个函数调用。

datePickerParams = {
    controlType     : "select",
    timeFormat      : "hh:mm TT",
    onClose         : function(dateText, inst) {
                          $scope.myModel.dateText = dateText;
                          // do stuff
                      }
};

然后将其传递给指令。

.directive('datePicker', function ($timeout) {
  return {
    scope: {
      datetimePickerParams: "=",
    },
    link : function (scope, elem, attrs) {
      $timeout(function() {
        elem.datetimepicker(scope.datetimePickerParams)
      });
    },
  };
});

(或许是时候检查角度日期选择器并远离jquery那些。)

答案 1 :(得分:0)

您是否尝试使用true作为第三个参数调用$ watch?

$scope.$watch("myModel.date", function(newVal, oldVal) {
  console.log("newVal: " + newVal + '  oldVal:' + oldVal);
  if (newVal == oldVal) {
    return;
  }
  // do something 
}, true);

这将检查值的相等性而不是引用相等性。

检查此处的documentation for $watch以了解第三个参数[objectEquality]的作用。基本上将其设置为true cause =&gt; “使用angular.equals比较对象相等性,而不是比较参考相等性。”

此外,观察布尔标志而不是对象可能会更好。在更改`myModel.date'时切换布尔标志,然后查看该标志。这会降低性能开销 - 检查对象比检查布尔标志要贵。

希望这有帮助!