angularjs - Reusing a directive template for multiple forms with isolated scope -
i'm working on project user needs able create many instances of same form. of user can click button create 1 or more forms. problem i'm having isolating scope, think should doing given i'm reusing same directive, ng-models
can't communicate parent controller.
my directive <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) })();
and template...
<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
), i'm problem of not having isolated scopes , each form updates others. i'm bit confused really. know solution problem, or problem code?
add controller directive.
angular.module('ganeshaapp').directive('ruleform', function(){ return { restrict: 'e', replace: true, scope: {}, templateurl: 'edit/rule-create/ruleform.html', controller: "rulesformcontroller rcctrl", link: function(scope, element, attrs){ scope.length = document.forms.length; } } });
the angularjs $compile
service create instance of controller each instance of directive , attach each isolate scope.
for more information, see angularjs comprehensive directive api reference.
Comments
Post a Comment