Angularjs 1.5.7 ng-change 从组件不起作用答案

【问题标题】：Angularjs 1.5.7 ng-change from component does not workAngularjs 1.5.7 ng-change 从组件不起作用
【发布时间】：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"
                >

【问题讨论】：

标签： angularjs components

【解决方案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);

【讨论】：