CODEWITHSUNDEEP
javascriptangularjs
Shih-Min Lee
Shih-Min Lee

Reputation: 9700

Angular directive parent and child scope communication

I have a directive which takes 1 variable (zone.id) from outside the directive scope and use it to request a promise and render the directive scope afterwards.

this id can come from products, users, ...etc so I need {{zone.id = product.id}} to assign this so the directive can do something afterwards.

Later the parent form is looking to submit the entire thing including the directive scope stuff after all request is finished.

What I am doing now is I do not isolate the scope and make sure the parent and child scope can communicate. It seems that if I isolate the scope the parent scope won't get what is rendered inside the directive scope. (right?..)

angular.module('mean.zone').directive('zonesSelect', ['Zones', function(Zones){
  return {
    templateUrl: '/zone/views/zonesselectform.html', 
    restrict : 'E', 
    scope: false,
    controller: function($scope) {

      $scope.zone = $scope.zone || {};
      $scope.zone.countries = $scope.zone.countries ||[];
      $scope.zone.country = $scope.zone.country || {};

      $scope.getStates = function(id){
        Zones.getsomething(id).then(function(states){
          // render the view here....
        });
      };
    },
  };
}]);

and the parent form template is something like this. 

<div class="form-group">
  <div ng-show='false'>
    {{zone.id = product.id}}
  </div>

  <zones-select></zones-select>
</div>

directive template is something like this

<select ng-change='getStates(zone.country.id)' data-ng-model='zone.country' data-ng-options="s.name for s in zone.countries" required></select>

This gets things done. Just that it looks really messy and I wonder if:

  1. is scope:false a correct to achieve what I want to do?

  2. if the answer is yes. Is there a way to get rid of the variables that shows up on my screen? {{zone.id = product.id}}

Thanks and any help is greatly appreciated.

Upvotes: 0

Views: 393

Answers (1)

dhavalcengg
dhavalcengg

Reputation: 4713

Answer 1: yes. If you do not want to create isolated scope or a new scope then, scope: false is the right way to do. But if you have want to use zone-select directive then you should think about creating new scope.

Answer 2: There are some better way to do. Whatever you have done is not proper in case of you want to use your directive multiple times in single scope. Because every initialization will remove your previous initialization.

Following is the better way to do.

Directive 

angular.module('mean.zone').directive('zonesSelect', ['Zones', '$parse', function(Zones, $parse){
  return {
    templateUrl: '/zone/views/zonesselectform.html', 
    restrict : 'E',
    scope: true,
    controller: function($scope, attr) {

      $scope.zone = $parse(attr.ngModel)($scope) || {};
      $scope.zone.countries = $scope.zone.countries ||[];
      $scope.zone.country = $scope.zone.country || {};

      $scope.getStates = function(id){
        Zones.getsomething(id).then(function(states){
          // render the view here....
        });
      };
    },
  };
}]);

Template

<zones-select ng-model="product"></zones-select>

Upvotes: 1

Related Questions