Make two directives have the same $ scope in the Angular

Question

Make two directives have the same $ scope in the Angular

Navigation

#1 by (3 votes)
#2 by (2 votes)

3

I have a directive that generates a button, and when I click this button a counter increases by 1. This policy is inserted in two places in my index.html. I would like that when I clicked on any of the buttons, the two were changed ...

Here is my code:

index.html:

<div ng-app='demo'>
    <button-directive></button-directive>
    <button-directive></button-directive>
</div>

app.js:

var demo = angular.module('demo', []);
demo.directive('buttonDirective', function($parse) {
    return {
        restrict: 'E',
        template: '<button ng-controller="MyCtrl" ng-click="increment()">{{count}}</button>',
    }
});

demo.controller('MyCtrl', ['$scope', function($scope){
    $scope.count = 0;
    $scope.increment = function(){
        $scope.count = $scope.count + 1;
    };
}]);

Here's a fiddle: link

angularjs angularjs-directives

asked by anonymous 19.03.2015 / 14:12

2 answers

2

You can use the $broadcast function of the $rootScope to transmit the events you want.

Code:

demo.controller('MyCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
  $scope.count = 0;
  $scope.increment = function ($broadcast) {
    $scope.count++;
    $broadcast('evento', $scope.count);
  }
}

19.03.2015 / 14:24

Insert into the database by recording in half Set municipalities limits in GoogleMaps

score 3 · Accepted Answer

I'm not very experienced with angularjs, but as far as I know the default behavior of a directive is to share the scope of the controller (otherwise we need to create an isolated scope).

You are creating a new controller for each policy.

I would do so:

<div ng-app='demo' ng-controller="MyCtrl">
    <button-directive></button-directive>
    <button-directive></button-directive>
</div>

js:

var demo = angular.module('demo', []);
demo.directive('buttonDirective', function($parse) {    
    return {
        restrict: 'E',
        template: '<button ng-click="increment()">{{count}}</button>',
    }
});

demo.controller('MyCtrl', ['$scope', function($scope){
    $scope.count = 0;
    $scope.increment = function(){
        $scope.count = $scope.count + 1;
    };
}]);

link

But notice that the directive has been very specific. To make it more generic and can be reused, we could do something like this:

<div ng-app='demo' ng-controller="MyCtrl">
    <button-directive ng-click="increment()" counter="{{count}}"></button-directive>
    <button-directive ng-click="increment()" counter="{{count}}"></button-directive>
    <button-directive ng-click="increment1()" counter="{{count1}}"></button-directive>
</div>

js:

var demo = angular.module('demo', []);
demo.directive('buttonDirective', function($parse) {

    return {
        restrict: 'E',        
        scope: {
            counter: '@'
        },
        template: '<button>{{counter}}</button>',
    }
});

demo.controller('MyCtrl', ['$scope', function($scope){
    $scope.count = 0;
    $scope.increment = function(){
        $scope.count = $scope.count + 1;
    };

    $scope.count1 = 0;
    $scope.increment1 = function(){
        $scope.count1 = $scope.count1 + 1;
    };
}]);

link