1

ユーザーが同じフォームの多くのインスタンスを作成できる必要があるプロジェクトに取り組んでいます。現在、ユーザーはボタンをクリックして 1 つ以上のフォームを作成できます。私が抱えている問題は、スコープを分離することによって、同じディレクティブを再利用していることを考えると、そうすべきだと思うのでng-models、親コントローラーと通信できないことです。

<rule-form></rule-form>..に対する私の指示

(function(){
'use strict';

var ruleForm = function(){
    return{
        restrict: 'E',
        replace: true,
        scope: {},
        templateUrl: 'edit/rule-create/ruleForm.html',
        link: function(scope, element, attrs){
            scope.length = document.forms.length;   
        }
    }
}

angular.module('ganeshaApp')
.directive('ruleForm', ruleForm)
})();

そして私のテンプレ…

<form class="edit__div--rule-form" name="form_{{length}}">
<input type="text" placeholder="Rule Title" ng-model="rcCtrl.ruleTitle">
<div class="edit__div--rc-toolbar">
    <select class="edit__btn--rc-select" ng-model="rcCtrl.select" apply-statement-type>
        <option value="obligation statement">obligation statement</option>
        <option value="prohibition statement">prohibition statement</option>
        <option value="permission statement">restricted permission statement</option>
    </select>
    <div class="edit__btn--rc-noun">
        Add noun/verb
    </div>
    <div class="edit__btn--rc-save" ng-click="rcCtrl.saveRule()">
        <span class="glyphicon glyphicon-floppy-saved"></span>Save
    </div>
    <div class="edit__btn--rc-cancel">
        <span class="glyphicon glyphicon-remove"></span>
        Cancel
    </div>
</div>
<div class="edit__select--statement-type"></div>

<div ng-show="rcCtrl.showTextEdit" class="edit__div--rule-form-text" contenteditable="true" ng-model="rcCtrl.ruleText"></div>

$parent, (例: )を使用してみ$parent.rcCtrl.ruleTextましたが、分離されたスコープがなく、各フォームが他のフォームを更新しないという問題に戻りました。私はこれについて本当に少し混乱しています。誰かがこの問題の解決策を知っていますか、それとも私のコードの問題ですか?

4

1 に答える 1

0

コントローラーをディレクティブに追加します。

angular.module('ganeshaApp').directive('ruleForm', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        templateUrl: 'edit/rule-create/ruleForm.html',
        controller: "rulesFormController as rcCtrl",
        link: function(scope, element, attrs){
            scope.length = document.forms.length;   
        }
    }
});

次に、AngularJS$compileサービスは、ディレクティブのインスタンスごとにコントローラーのインスタンスを作成し、それを各 Isolate スコープにアタッチします。

詳細については、AngularJS Comprehensive Directive API Referenceを参照してください。

于 2016-02-08T23:59:38.473 に答える