我已经使用AngularJS了几天,我声明了两个不需要任何指令的指令。但是我需要ngModel才能使用$setViewValue方法。

我的指令如下所示:

<corina>
    <properties data-ng-repeat="property in Properties"></properties>
</corina>


指令的定义如下:

var Application = Application || {};

;(function(window, document, undefined) {

    "use strict";

    var CorinaJSDialog = {};

    Application.CorinaJSDialog = angular.module("CorinaJSDialog", ["ngSanitize"]);

    Application.CorinaJSDialog.constant("CorinaJSAPI", {

        document : {
            load : "/corina/api/loaddocument",
            save : "/corina/api/savedocument"
        }
    });

    Application.CorinaJSDialog.directive("corina", ["$timeout", function($timeout){

        var object = {

            restrict : "E",
            require : "ngModel",

            transclude : true,
            replace : true,
            priority : 1,
            templateUrl : "corina.html",
            controller : function($scope) {},
            link : function(scope, element, attrs, controller) { console.log(controller); }
        };

        return object;
    }]);

    Application.CorinaJSDialog.directive("properties", ["$timeout", function($timeout){

        var object = {

            restrict : "E",
            require : "?corina",
            transclude : true,
            replace : true,
            priority : 2,
            terminal : true,
            templateUrl : "properties.html",
            controller : function($scope) {},
            link : function(scope, element, attrs, controller) {

                var loadXeditable = function() {

                    $(element).editable({
                        mode: "inline",
                        display: function(value) {

                            controller.$setViewValue(value);

                            scope.$apply();

                            $(this).html(value);
                        }
                    });
                };

                $timeout(function() {
                    loadXeditable();
                }, 10);

            }
        };

        return object;
    }]);

})(window, document);


以及加载的模板:

corina.html

<div>
    <div data-ng-transclude></div>
</div>


properties.html

<div>
    <div class="row">
        <span class="span4">{{property.Name}}</span>

        <div class="span8">
            <a href="#" data-type="{{property.Type | lowercase}}" data-ng-model="property.Value" data-name="{{ property.Name }}" data-placeholder="{{ property.Value }}">
                <span data-ng-bind-html="{{ property.Value.toString() }}"></span>
            </a>
        </div>
    </div>
</div>


每次我执行以上操作时,都会出现此错误:

Error: No controller: ngModel
at Error (<anonymous>)
at i (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:41:165)
at l (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:43:252)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:47:425
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:96:330
at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:78:207)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:78:440
at Object.e.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:89:272)
at Object.e.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:87:124)
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:89:431) <div data-ng-transclude=""> angular.min.js:62


另外,如果我需要类似^mydir的指令,则会收到相同的错误,或者仅仅是类似mydir的错误。仅当我使用?mydir时,我不会出现任何错误,但是我不能使用ngModule指令。对于我做错了什么,我将不胜感激。

最佳答案

按照我的解释,您有两个元素指令corinaproperties,其中properties希望使用corina中的控制器。这将始终失败,因为它们必须位于同一元素上才能使require: 'corina'起作用。但是我现在在您的模板中看到propertiescorina内,所以在properties中应该做的是:require : "^?corina"。这告诉Angular也要在父元素中寻找corina控制器。

由于在corina元素上未设置ngModel,因此在corina中要求ng-model不会起作用。您的ng-model设置在corina替换模板内的元素上,因此corina指令无法获取该ngModelController。您只能从同一元素或父元素而不是子元素中请求控制器。如果确实需要ngModelController,则应在具有ng-model的同一元素上添加自己的指令,并在其中要求ngModelController。该指令可能需要corina控制器(因为corina控制器位于父元素上),并将ngModelController传递给corina控制器。

但是我不确定,为什么首先要在这里使用ng-model?您已将其放置在不会做任何事情的锚点元素上。在锚元素上具有ng-model后,您的效果如何?

关于javascript - angularjs错误:无 Controller :ngModel,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15099204/

10-12 15:39