Angular 数字选择器指令表达式未定义

Question

我已经阅读了一些与此主题有关的问题，但无法弄清楚我自己的指导中遗漏了什么。

angular.module('app')
    .directive('numberPicker', [NumberPicker]);

function NumberPicker () {

    var getTarget, getType;

    getTarget = function (e) { return angular.element(e.target); }

    getType = function (e) { return getTarget(e).attr('direction-type'); }

    return {
        restrict: 'E',
        replace: true,
        require: 'ngModel',
        scope: {
            value: '='
        },
        template: '<div class="ui action input">' +
                    '<input value="{{value}}" type="text" />' +
                    '<button class="ui icon button" type="button" direction-type="up" ng-class="{disabled : canUp === false}">' +
                        '<i class="angle up icon" direction-type="up"></i>' +
                    '</button>' +
                    '<button class="ui icon button" type="button" direction-type="down" ng-class="{disabled : canDown === false}">' +
                        '<i class="angle down icon" direction-type="down"></i>' +
                    '</button>' +
                  '</div>',
        controller: function ($scope) {},
        link: function (scope, element, attrs, ctrl) {

            scope.value = 0;

            var options = {
                min: 0,
                max: 10,
                step: 1
            };

            scope.$watch('value', function (newValue) {
                scope.canDown = newValue > options.min;
                scope.canUp = newValue < options.max;

                if (ctrl.$viewValue != newValue) {
                    ctrl.$setViewValue(newValue);
                }
            });

            var changeNumber = function (event) {
                var type = getType(event);
                if ('up' === type) {
                    if (scope.value >= options.max) {
                        return;
                    }
                    scope.value += options.step;
                }
                if ('down' === type) {
                    if (scope.value <= options.min) {
                        return;
                    }
                    scope.value -= options.step;
                }
            }

            var btn = element.find('button');
            var input = element.find('input');

            btn.on('click', function (e) {

                scope.$apply(function () {
                    changeNumber(e);
                });

                e.preventDefault();
            });

            input.on('change', function (e) {
                scope.value = input[0].value;
                scope.$apply();
            })

            scope.$on('$destroy', function () {
                btn.off('touchstart touchend click')
            });
        }
    }
}

这样做的目的是为 Semantic UI 创建一个数字选择器表单元素。几天前它运行良好。而且这个错误非常模糊，我什至无法处理从哪里开始。我有没有提到我是一个 Angular 菜鸟？

错误是：

Error: [$compile:nonassign] Expression 'undefined' used with directive 'numberPicker' is non-assignable!

Answer 1

如何使用该指令？根据定义，您需要同时设置 "value" 和 "ng-model" 属性。例如：

<number-picker value="xyz" ng-model="abc"></number-picker>

如果未设置范围值之一，通常会引发错误 "Expression 'undefined' used with directive..."。

Angular 数字选择器指令表达式未定义

Angular Number Picker Directive Expression is undefined

numbers

directive

undefined

picker

angularjs