CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeangular-ui
Claud Posner
Claud Posner

Reputation: 27

Copy scope property from another isolated scope using one directive

Basically, I have a directive which is used by two forms. On page load, each loads the default properties set by the directive. The problem is, both forms need to have a checkbox option to be able to apply the same properties to the other form. I have two separate html templates and controllers for each form.

return function row(ModelService) {
  return {
    restrict: 'E',
    templateUrl: function(elem, attr) {
      return elem.templateUrl;
    },
    scope: {
      formTitle: '@',
      type: '@'
    },
    link: function(scope, elem) {

      scope.setDefault = function() {
        .
        . scope settings defined here
        .
        .
        .
      }
      
      scope.close = function (action) {
        .
        . if(checked) {
        .   some code needed to apply the settings to the other form 
        . }
        .
        .
        .
      }
    };
  });
<div ng-controller="app.FirstCtrl">
  <propFilter form title="someTitle" template-url="someUrl"></propFilter>
  . 
  . multiple div elements with ng-model
  .
  .
  .
  <input id="applyToOther" type="checkbox">
</div>


<div ng-controller="app.secondCtrl">
  <propFilter form title="someTitle" template-url="someUrl"></propFilter>
  .
  . multiple div elements with ng-model
  .
  .
  .
  <input id="applyToOther" type="checkbox">
</div>

What I want to know is how to copy the properties of a scope to the other scope using the same directive if possible. Any help would be very much appreciated. Thank you!

Upvotes: 1

Views: 307

Answers (1)

V&#237;ťa Plšek - angular.cz
V&#237;ťa Plšek - angular.cz

Reputation: 1503

You can create some factory which holds your common data. You can them inject it into controller or to the directive, it depends on your use case.

I have created some example which shows this:

http://jsbin.com/nibufogayi/1/edit?html,js,output

HTML:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="directiveBroadcast">
  <div ng-controller="directiveCtrl1 as ctrl1">    
    <checkboxes ng-model="ctrl1.checkboxData"></checkboxes>
  </div>
  <div ng-controller="directiveCtrl2 as ctrl2">
    <checkboxes ng-model="ctrl2.checkboxData"></checkboxes>
  </div>

<script type="text/ng-template" id="/directive.html">
  <div>Directive</div>  
  <input type="checkbox" ng-model="ngModel.checkbox1" />
  <input type="checkbox" ng-model="ngModel.checkbox2" />
</script>
</body>
</html>

JS:

angular.module('directiveBroadcast',  [])
.factory('checkboxData', function() {
  return {checkbox1 : true,
          checkbox2 : false
         };
})
.controller('directiveCtrl1', function(checkboxData){
  this.checkboxData = checkboxData;            
})
.controller('directiveCtrl2',function(checkboxData){
  this.checkboxData = checkboxData;            
})
.directive("checkboxes", function() {
  return {
    restrict: "E",
    scope: {
      ngModel: "="      
    },
    templateUrl: "/directive.html"    
  };
});

Other posibility would be injecting it to directive or some "static" context in directive

Upvotes: 1

Related Questions