CODEWITHSUNDEEP
javascriptangularjs
JorgeDLuffy
JorgeDLuffy

Reputation: 310

AngularJS - Same level directives mistaking same name methods

I have two directives: directiveA and directiveB, hanging from the same module in my AngularJS application. They are called at the same level in the same HTML template, so we could say they are brothers.

<directive-a>
<directive-b>

Both of them have an own method hanging from its scope, like this:

$scope.clickOkey = function () {
       ... whatever
     };

They both have a 'clickOkey' method, but their behaviours are different. My problem comes out when I try to call the 'clickOkey' of directiveA from directiveA's template. It executes the 'clickOkey' from directiveB.

Inside directiveA's own template:

<label ng-click="clickOkey()">Okey</label>

They are placed at same level so there it shouldn't be way for them to share their $scope or misunderstanding methods.

Also, is important to say that if I change the method's name to 'clickOkeyA', for example, it takes the right method, so the template can access to its scope without problems.

What am I missing? Thanks for your help!

Edit: Both directives are isolated and have a controller, and inside each one of them is defined a 'clickOkey' method. There are two methods with the same name.

Both directives are like this:

angular.module('myModule').directive('directiveA', function () {
    return {
        restrict: 'AE',
        templateUrl: '/whatever.html',
        controller: function ($scope, $http, $rootScope) {

            $scope.clickOkey = function () {
               ... whatever
             };
        }
    }
});

Upvotes: 1

Views: 724

Answers (1)

ThibaudL
ThibaudL

Reputation: 1009

You should add an isolated scope to your directives : https://docs.angularjs.org/guide/directive

For your directive it would be : 

angular.module('myModule').directive('directiveA', function () {
  return {
    restrict: 'AE',
    templateUrl: '/whatever.html',
    scope : {},
    controller: function ($scope, $http, $rootScope) {

        $scope.clickOkey = function () {
           ... whatever
         };
    }
  }
});

Upvotes: 1

Related Questions