Angularjs 1.5.7 来自组件的 ng-change 不起作用

Question

我使用 angularjs 1.5.7 并尝试使用组件方式，但我遇到了 ng-change 的问题。 Ng-change 不适用于 $ctrl 属性通过 '=' 绑定。谁能解释为什么它不起作用？

看看外部模型。此属性在输入中用作 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"
                >

Answer 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>

Answer 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 1.5.7 ng-change from component does not work

components

angularjs

下面附上工作代码：