Повторное использование шаблона директивы для нескольких форм с изолированной областью действия

Я работаю над проектом, в котором пользователь должен иметь возможность создавать множество экземпляров одной и той же формы. На данный момент пользователь может нажать кнопку, чтобы создать одну или несколько форм. Проблема, с которой я сталкиваюсь, заключается в том, что из-за изоляции области действия, как я думаю, я должен делать, учитывая, что я повторно использую одну и ту же директиву, мой 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>

I tried using $parent , (e.g. $parent.rcCtrl.ruleText), but then I'm back to the problem of not having isolated scopes and each form updates the others. I'm a bit confused about this really. Does anyone know a solution to this problem, or is it just a problem with my code?


angularjs angularjs-directive angular-template angularjs-scope
person hughesjmh    schedule 08.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Добавьте контроллер в свою директиву.

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 создаст экземпляр контроллера для каждого экземпляра директивы и прикрепит его к каждой изолированной области.

Для получения дополнительной информации см. справочник по API всеобъемлющей директивы AngularJS.

person georgeawg    schedule 08.02.2016
comment
Спасибо, Джордж. Это именно то, что я искал. - person hughesjmh; 10.02.2016
comment
Пожалуйста. Для получения дополнительной информации см. справочник по API всеобъемлющей директивы AngularJS. - person georgeawg; 10.02.2016