Question

我正在开发一个项目，用户需要能够创建同一表单的许多实例。截至目前，用户可以单击按钮来创建一个或多个表单。我遇到的问题是，通过隔离范围，我认为我应该这样做，因为我正在重用相同的指令，我的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），但后来又回到了没有隔离范围的问题，每个表单都会更新其他表单。我真的对此感到困惑。有没有人知道这个问题的解决方案，还是我的代码只是一个问题？

Answer 1

在指令中添加控制器。

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服务将为该指令的每个实例创建一个控制器实例，并将其附加到每个隔离范围。

有关详细信息，请参阅AngularJS Comprehensive Directive API Reference。

为具有隔离范围的多个表单重用指令模板

1 个答案: