javascript - AngularJS 自定义指令未加载

Question

我使用的是 Angular 1.4.x。

我正在制作一个自定义指令来检查某个字段在服务器上是否唯一(该字段称为“jmbg”)。我有以下代码:

(function() {
angular
    .module('app')
    .directive('uniqueJmbg', uniqueJmbg);

uniqueJmbg.$inject = ['$q', '$http'];
function uniqueJmbg($q, $http) {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModelCtrl) {
        ngModelCtrl.$asyncValidators.uniqueJmbg = function(modelValue, viewValue) {
            var value = modelValue || viewValue;

            return $http.get('/server/users/' + value)
                .then(function resolved() {
                    return $q.reject('exists');
                }, function rejected() {
                    return true;
             });
        };
    }
}
})();

我通过以下方式在 HTML 中使用该指令:

<input class="form-control" type="text" id="jmbg" name="jmbg" ng-model="rad.radnik.jmbg" ng-model-options="{ updateOn: 'default blur', debounce: {'default':400, 'blur':0 } }" unique-jmbg/>

如果重要的话，我正在使用带有controllerAs 语法的 Controller 。现在，发生的情况是包含我的 uniqueJmbg 定义的文件永远不会加载(我在浏览器调试器中看不到它)。如果我将代码移至确实加载的组件，应用程序将停止工作(并且控制台中没有错误)，因此我无法对此进行调试。

知道可能出了什么问题吗？我什至无法访问浏览器中的代码？

Answer 1

向模块添加依赖项

angular
    .module('app', [])
    .directive(...

并且您需要从模块返回一个对象，因此更正将是:

function uniqueJmbg($q, $http) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModelCtrl) {
            ...
        }
    };
}