Angularjs 1.5.7 ng-change 从组件不起作用
Posted
技术标签:
【中文标题】Angularjs 1.5.7 ng-change 从组件不起作用【英文标题】：Angularjs 1.5.7 ng-change from component does not work 【发布时间】：2016-11-04 09:05:43 【问题描述】：我使用 angularjs 1.5.7 并尝试使用组件方式，但我遇到了 ng-change 的问题。 Ng-change 不适用于通过 '=' 绑定的 $ctrl 属性。谁能解释为什么它不起作用？
看看outerModel。此属性在输入中用作 ngModel 值。
组件代码：
"use strict";
CrmApp.component('inputNumber',
templateUrl: function ($attrs)
return $attrs.templateUrl || '/templates/components/inputNumber.html';
,
bindings:
'step': '<',
'min': '<',
'max': '<',
'required': '<',
'disableText': '<',
'resetOnOverflow': '<',
'outerModel': '=',
'changeCallback': '&',
'doubledZero': '<',
,
controller: function($rootScope, $scope, $element)
let ctrl = this;
let input = $element.find('input');
ctrl.changeCallback = ctrl.changeCallback();
ctrl.descritizeUnceratainVisitMinutes = function (value)
if (+value > 0 && +value <= 15)
ctrl.outerModel = 15;
else if (+value > 15 && +value <= 30)
ctrl.outerModel = 30;
else if (+value > 30 && +value <= 45)
ctrl.outerModel = 45;
else
ctrl.outerModel = 0;
return ctrl.outerModel;
;
ctrl.test = function ()
alert(123);
console.log(123);
);
组件模板：
<input
ng-model="$ctrl.outerModel"
ng-required="$ctrl.required"
ng-change="$ctrl.test();"
name="$ctrl.name"
>
我如何使用组件：
<input-number
class="e-time-part__uncertain-visit"
min="0"
required="true"
disable-text="true"
reset-on-overflow="true"
outer-model="visit.hours"
change-callback="changeVisitCallback"
name="hours"
>
【问题讨论】：
【参考方案1】：代码方面我认为没有任何问题。可能是您的模板可能有一些问题。 甚至我尝试使用 angular1.5.7 版本执行它并且工作正常。
工作代码附如下：
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script>
angular.module('mainModule', [])
.controller('MainCtrl', ['$scope', '$rootScope', '$window', function($scope, $rootScope, $window)
$scope.visit = hours: 1200;
])
.component('inputNumber',
template: '<input ng-model="$ctrl.outerModel" ng-required="$ctrl.required" ng-change="$ctrl.test();" name="$ctrl.name">',
bindings:
'step': '<',
'min': '<',
'max': '<',
'required': '<',
'disableText': '<',
'resetOnOverflow': '<',
'outerModel': '=',
'changeCallback': '&',
'doubledZero': '<',
,
controller: function($rootScope, $scope, $element)
let ctrl = this;
let input = $element.find('input');
ctrl.changeCallback = ctrl.changeCallback();
ctrl.descritizeUnceratainVisitMinutes = function (value)
if (+value > 0 && +value <= 15)
ctrl.outerModel = 15;
else if (+value > 15 && +value <= 30)
ctrl.outerModel = 30;
else if (+value > 30 && +value <= 45)
ctrl.outerModel = 45;
else
ctrl.outerModel = 0;
return ctrl.outerModel;
;
ctrl.test = function ()
alert(123);
console.log(123);
);
</script>
<body ng-app="mainModule">
<div ng-controller="MainCtrl">
<input-number
class="e-time-part__uncertain-visit"
min="0"
required="true"
disable-text="true"
reset-on-overflow="true"
outer-model="visit.hours"
change-callback="changeVisitCallback"
name="hours"
>
</div>
</body>
</html>
【讨论】：
【参考方案2】：谢谢大家，我发现我的代码有问题。 我使用了无法正确更新 UI 的微调器 https://jqueryui.com/spinner/。通过 $setViewValue 更新 UI 解决了这个问题：
let ngModel = angular.element(input).controller('ngModel');
ngModel.$setViewValue(+ui.value);
【讨论】：
以上是关于Angularjs 1.5.7 ng-change 从组件不起作用的主要内容，如果未能解决你的问题，请参考以下文章
如何从angularjs中选择的ng-change调用服务方法？
$event.target 的 AngularJS 复选框 ng-change 问题
AngularJS：从下拉列表中选择任何选项时，函数在 ng-change 上触发两次