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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -