make directive scope and controller scope variable in sync.

112 views
Skip to first unread message

Suresh K. V.

unread,
Oct 28, 2015, 10:56:37 AM10/28/15
to AngularJS
Hi,

I have created two directives(dirA, dirB). directiveA created scope variable not working in directiveB nor in controller scope.

//DirectiveA
myApp.directive("directiveA", function () {
    return {
      restrict: "AE",
      replace: true,
      controller: 'myController',
      scope: {
      aData: "=aData",              //input to the directive
      cardData: "=cardData"      //input to the directive
      },
      link : function(scope, element, attr) {
             // some other code
        },
      templateUrl: 'directiveA.html'
    };
});

//DirectiveB
myApp.directive("directiveB", function () {
    return {
      restrict: "AE",
      replace: true,
      controller: 'myController',
      scope: {
      bData: "=bData",                   //input to the directive
      cardData: "=cardData"           //input to the directive
      },
      link : function(scope, element, attr) {
                 // some other code
        },
      templateUrl: directiveB.html'
    };
});

//directiveA.html
<div>
<span>Head A</span>
<div>
   <input type="range" name="work_one" min='0' max=5' step="1" data-ng-init="selectedA=0" data-ng-model="selectedA" data-ng -     change="getSupportBList(aData[selectedA]);" value="0" />
   {{supportBList}}                      //Getting Proper result as expected.
</div>
</div>

//myController.js

//........
$scope.getSupportBList= function(val) {
$scope.supportBList= ['B1', 'B2', 'B3', 'B4'];
};
//........


Now, when I am using the same  {{supportBList}} in my controller view or in the directiveB.html template it is not returning any value. After inspecting with ng-inspector, the directiveA only have the  "supportBList" values. now, how can I make the "supportBList" available in the controller view? 

Any help would be greatly appreciated. 

Leandroh

unread,
Oct 28, 2015, 11:40:27 AM10/28/15
to ang...@googlegroups.com
Hello, Suresh.

Try using: 

myApp.directive("directiveA", function () {
    return {
       restrict: "AE",
       replace: true,
       controller: 'myController',
        scope: true,
       bindToController: {
       aData: "=aData",              //input to the directive
       cardData: "=cardData"      //input to the directive
       },
       link : function(scope, element, attr) {
             // some other code
        },
       templateUrl: 'directiveA.html'
    };
});

Available under the version 1.4.x

Suresh K. V.

unread,
Oct 29, 2015, 2:03:42 AM10/29/15
to AngularJS
Not working...

Vaibhav Gupta

unread,
Oct 29, 2015, 2:39:40 AM10/29/15
to AngularJS
Hi Suresh,

Since both directives create isolated scopes, their respective data will not be shared. Also, myController is not a shared controller. Both directives will have a fresh instance of myController with different scopes. To share data between directives and controllers you can use the following strategies:

1. Create a service and set the data in the service as compared to $scope.
2. Use emit event with data from root scope and listen to it in directive/controller. This should be avoided as it becomes difficult to track who is listening what.
3. Use a parent object with supportBList as its property. I have created a plunk for this:

Suresh K. V.

unread,
Oct 29, 2015, 5:29:17 AM10/29/15
to AngularJS
Thanks Vaibhav, I have created a parent controller and using the emit concept to avail the supportBList values.
Reply all
Reply to author
Forward
0 new messages