0

私はAngularJSを数日間使用しており、何も必要ない場合に機能する2つのディレクティブを宣言しています。しかし、私はメソッド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私が間違っているのは何であるかについてのいくつかの入力をいただければ幸いです。

4

1 に答える 1

3

私が解釈すると、2つの要素ディレクティブcorinaとがあります。propertiesここでproperties、からコントローラーが必要corinaです。それらが機能するためには同じ要素上にある必要があるため、それは常に失敗しますrequire: 'corina'。しかし、私は今あなたのテンプレートpropertiesの中にあるのを見るcorinaので、あなたがすべきことpropertiesはこれです：require : "^?corina"代わりに。これにより、Angularは親要素でもcorinaコントローラーを探すようになります。

ただし、corina要素に設定されていないため、requireingは機能しませんngModel。置換テンプレート内の要素に設定されているため、ディレクティブがそのngModelControllerを取得する方法はありません。子要素からではなく、同じ要素または親要素からのみコントローラーを要求できます。本当に必要な場合は、そこに必要なものと同じ要素に独自のディレクティブを追加する必要があります。そのディレクティブは、コントローラーを要求し（コントローラーが親要素上にあるため）、コントローラーに渡すことができます。corinang-modelng-modelcorinacorinangModelControllerng-modelngModelControllercorinacorinangModelControllercorina

ng-modelでも、そもそもなぜここで使いたいのかよくわかりません。何もしないアンカー要素に配置しました。ng-modelアンカー要素に与えた後の効果は何ですか？

于 2013-02-27T06:15:32.880 に答える