angularjs directive + apply scope value in many controller

Question

In angularjs when using directive how to apply the scope(isolated scope) value update into many controller.

For example:

I have many templates in view page:

left menu template
top menu template
right content template.

the above things using ui-router plugin. In this scenario right content have the controller name is ordersController.

Left menu template:

<a ng-custom-click  data="data" href="#/order"> Orders </a>

List .. etc.

app.controller('myapp', function($scope){

  $scope.data = {
            list : true,
            details : false,
            test : "rk controller"
        };
}

Directive code:

app.directive('ngCustomClick', function() {
    return {
        restrict : 'A',
        replace : false,
        controller : 'ordersController',
        scope : {
            data : '='
        },
        link : function(scope, el, attrs) {
            el.bind('click', function(e) {
                scope.data = {
                 list : false,
                 details : true,
                 test : "abcd directive"
              };
            });
        }
    };
});

Here ordercontroller is no relationship with left menu template.

So when click the link means the scope.data values need to change in ordercontroller.

Walfrat · Accepted Answer · 2016-06-08 10:10:20Z

2

Nope that won't work.

For each directive you're using, a new controller with his own $scope wil be created. So they don't share datas. You need to share them using a service

Here is a working snippet

    var app = angular.module("app",[]);
    app.service('myService', function(){
       this.data = {
                list : true,
                details : false,
                test : "rk controller"
            };
      return this;
    });
    app.controller('myapp2', function($scope, myService){

      $scope.dataOrders = myService.data;
      //optionnal if you want to save change from you order to the service
      $scope.$watch('dataOrders', function(newValue){
          myService.data = newValue;
      });
      // if service's data change resync it
      $scope.$watch(function(){return myService.data;}, function(newValue){
           $scope.dataOrders = newValue;
      });
    }
    );
    app.directive('ngCustomClick', function(myService) {
        return {
            restrict : 'A',
            replace : false,
            scope : {
               
            },
            link : function(scope, el, attrs) {
                el.bind('click', function(e) {
                    myService.data = {
                     list : false,
                     details : true,
                     test : "abcd directive"
                  };
                  scope.$apply();
                });
            }
        };
      });

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="app">
      <div>
          <a ng-custom-click href="#/order"> Orders </a> 
     </div>
     <div ng-controller="myapp2">
        Orders : {{dataOrders}} 
      </div>
   </div>

edited Jun 8, 2016 at 10:10

answered Jun 8, 2016 at 9:41

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RSKMR Over a year ago

Hi, Thanks for your reply. <a ng-custom-click data="data" href="#/order"> Orders </a> this code available in left menu. but i need to change the values in ordersController.

Walfrat Over a year ago

You meant your orders controller is somewhere else in your page ?

RSKMR Over a year ago

yes. no relationship in left menu html. I attached my code here. but the code its not work . plnkr.co/edit/yYoXo63cQy66d061xFnT?p=preview

RSKMR Over a year ago

I understand your code. But in my case little different. Please help me I don;t have idea. now updated my all code. plnkr.co/edit/yYoXo63cQy66d061xFnT?p=preview

Walfrat Over a year ago

I edited my post, this time as you can see the controller is declared somewhere else the directive is used. As i said in my original post, controller are instanciated for each time they're used, so you can't use htme like this, you have to use a service to share data and watch for changes.

Collectives™ on Stack Overflow

angularjs directive + apply scope value in many controller

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related