检测谁更改了模型（用户输入与控制器）angularjs

Question

我有一个连接到模型的输入。此外，输入具有 $watch 模型的指令。

模型有两种变化方式。

用户将在文本框中键入内容。
代码会改的（不管是什么原因）

我的问题是

有没有办法找出谁更改了指令中的模型、用户交互或代码？

示例：

angular.module('app', [])
.controller('ctrl', function($scope) {

})
.directive('dir', function($rootScope){
  return {
    require: 'ngModel',
    link: function(scope, element, attrs) {
      $rootScope.logs = [];
      scope.$watch(attrs.ngModel, function() {
        // here I need to check if the change was from the UI or from the controller
        
        $rootScope.logs.push('change');
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl">
  <input type="text" data-ng-model="model" data-dir="" />
  <button data-ng-click="model = 'asd'">Set "model" to defferent value</button>

  {{model}}
  <hr />
  <h3>console <button data-ng-click="$root.logs = []">clear console</button></h3>
  <ul>
    <li data-ng-repeat="log in $root.logs track by $index" data-ng-bind="log"></li>
  </ul>
</div>

http://jsbin.com/vufawur/edit?html,js,output

更新

示例 2：

angular.module('app', [])
.controller('ctrl', function($scope, $timeout) {
  $timeout(function() {
      $scope.model = 'asd';
  }, 3000);
})
.directive('dir', function($rootScope){
  return {
    require: 'ngModel',
    link: function(scope, element, attrs) {
      $rootScope.logs = [];
      scope.$watch(attrs.ngModel, function() {
        // here I need to check if the change was from the UI or from the controller

        $rootScope.logs.push('change');
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl">
  ...wait until data "return from the server"<br />
  <input type="text" data-ng-model="model" data-dir="" />
  
  {{model}}
  <hr />
  <h3>console <button data-ng-click="$root.logs = []">clear console</button></h3>
  <ul>
    <li data-ng-repeat="log in $root.logs track by $index" data-ng-bind="log"></li>
  </ul>
</div>

Answer 1

不要使用$watch。你不该用，你也得不用，你用了就出事$watch，你已经出事了，就别用了

Angular JS - you probably shouldn't use $watch in your controllers.
Is it an antipattern to use angular's $watch in a controller?

使用控制流和事件。可能你已经有很多 watcher 和 scope 汤了，现在还不算晚，尽快重构，对你最好。

angular.module('app', [])
  .controller('ctrl', function($scope) {

  })
  .directive('dir', function($rootScope) {
    return {
      require: 'ngModel',
      link: function($scope, element, attrs) {
        $rootScope.logs = [];

        $scope.modelChange = function(reason) {
          $rootScope.logs.push(reason);
        };

        $scope.modelChangedFromInput = function(model) {
          $scope.modelChange('From input');
        };

        $scope.buttonClick = function() {
          $scope.model = 'asd';
          $scope.modelChange('From button');
        };
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl">

  <input type="text" data-ng-model="model" data-dir="" data-ng-change="modelChangedFromInput()" />

  <button data-ng-click="buttonClick()">Set "model" to different value</button>

  {{model}}
  <hr />
  <h3>console <button data-ng-click="$root.logs = []">clear console</button>
  </h3>
  <ul>
    <li data-ng-repeat="log in $root.logs track by $index" data-ng-bind="log"></li>
  </ul>
</div>

Answer 2

`ext-change` `ng-model`

的外部更改指令

使用 $viewChangeListener 保存最后的用户输入，并让监视处理程序对其进行比较，以区分对模型的外部更改与对模型的用户输入更改。

.directive('extChange', function(){
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, modelCtrl) {
        var lastUserInput = modelCtrl.$viewValue;
        modelCtrl.$viewChangeListeners.push(function() {
            lastUserInput = modelCtrl.$viewValue;
        });
        scope.$watch(attrs.ngModel, function watchHandler (value) {
            if (value!==lastUserInput) {
                scope.$eval(attrs.extChange, {$value:value});
            }                
        });
    }
  }
});

示例指令保存最后的用户输入。当监视处理程序获得不同的值时，它会调用 ext-change 属性定义的 Angular 表达式。更改的值显示为 $value.

<input ng-model="someInput"
       ng-change="userInput=someInput"
       ext-change="extInput=$value">

ext-change 指令与 ng-model 指令一起使用，并补充了 ng-change 指令。

在此示例中，ext-change 指令仅在对模型进行外部更改时更新 extInput 变量。 ng-change 指令仅为用户更改更新 userInput 变量。

DEMO on JSFiddle

该指令也可用于调用函数。

<input ng-model="someInput"
       ng-change="userEvent(someInput)"
       ext-change="externalEvent($value)">

检测谁更改了模型（用户输入与控制器）angularjs

Detect who change the model (user input vs controller) angularjs

javascript

angularjs

angularjs-directive

angularjs-watch

`ext-change` `ng-model`

检测谁更改了模型（用户输入与控制器）angularjs

Detect who change the model (user input vs controller) angularjs

javascript

angularjs

angularjs-directive

angularjs-watch

ext-change ng-model

`ext-change` `ng-model`