检测谁更改了模型(用户输入与控制器)angularjs
Detect who change the model (user input vs controller) angularjs
我有一个连接到模型的输入。此外,输入具有$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>
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
变量。
JSFiddle 上的演示
该指令还可用于调用函数。
<input ng-model="someInput"
ng-change="userEvent(someInput)"
ext-change="externalEvent($value)">
不要使用 $watch
。你不应该使用它,你必须不使用它,如果你使用$watch
你就会遇到麻烦,你已经有麻烦了,不要使用它。
- Angular JS - 你可能不应该在你的控制器中使用$watch。
- 在控制器中使用角度$watch是一种反模式吗?
使用控制流和事件。有可能你已经有很多观察者和范围汤,现在还不算太晚,尽快重构,这是为了你最好的。
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>
相关文章:
- 如何将角度输入指令数据传递给控制器
- 动态启用/禁用来自控制器的输入文本
- 在控制器中将输入类型时间更改为秒
- 如何在视图中保存用户输入内容,并在离开页面时对控制器进行后期调用
- 控制器内部无法访问Angular js输入模型
- 如何正确清除AngularJS控制器输入无效的表单
- 控制器作为搜索输入表单的语法
- 如何从html输入类型=“”中只获得Angular控制器变量中的时间值;时间”;
- 如何从ng重复中获得控制器的输入值
- 如何在angularJS控制器中获得输入字段的值
- 如何在控制器中获取输入的ngModel
- EmberJS:将输入值绑定到控制器属性,并在更改时运行过滤器
- 检测谁更改了模型(用户输入与控制器)angularjs
- 从输入中获取一个值,以便在控制器 Angular JS 中使用
- 未在选择标记下拉列表中选择以隐藏其他输入元素的嵌套控制器
- ember - 控制器操作仅由输入字段调用,而不由按钮调用
- 如何将表单输入数据从数据列表传递到我的角度控制器
- 按钮单击事件未将输入字符串传递给 MVC 控制器方法
- 角度输入无线电未显示控制器中所做的更改
- angular-UI select2 不能在同一控制器中使用 select2Options 进行多个输入