Two instances of same directive interfering with each other?

Question

To pinpoint the bug I have, I created two instances of the same directive in my view :

<criterion-news
  state="ctrl.state">
</criterion-news>
<criterion-news
  state="null">
</criterion-news>

The first gets its state from containing controller, the second one is told explicitely to have no state.

Each instance of the directive consists of a tree-based list, and the purpose of the directive is to display this list and manage the item selection behaviour.

When I click in the UI of the second directive, the state of the first directive is updated : when I check a checkbox in the second instance, the checkbox of the corresponding item in the first instance gets checked. It seems to me that, as isolated-scopes are created in each instance, and as I passed "null" to the second directive, no data should be shared between the two instances. Here is the structure of the directive :

"use strict";
(function() {
  angular
    .module("z360m.target-list")
    .directive("criterionNews", function() {
      return {
        restrict: "E",
        scope: {
          "state": "="
        },
        bindToController: true,
        templateUrl: "my template url",
        controllerAs: "ctrl",
        controller: function() { ... }
      };
    });
})();

Is there something wrong in it ?

EDIT : My directive contains checkboxes, which are identified by a functional id. The problem was that the same ids were duplicated in both instances. I added a random-generated directive instance id in my checkbox ids, and now it works like a charm : my states are independant.

there isn't enough information here to test my theory at the moment, but if I had to make a *guess*, it would be the fact that you are using the same alias (`ctrl`) for both the parent controller and the child directive controller. when you reference `ctrl.state` in the child, it is seeing the property on the parent. if your directive were something like `controllerAs: "newsDir"`, then when you reference `newsDir.state`, it won't find that property, though you still could reference `ctrl.state`...... — Claies, Dec 28 '16 at 17:17
in general, I recommend against using `ctrl`, `vm`, or anything else generic like this when using `controllerAs`. one of the strong points of using `controllerAs` is that it is easier to see what object you are going to modify, but when all the objects are named the same, it's more prone to these kind of bugs, on top of being less clear than if each controller is named for it's purpose. — Claies, Dec 28 '16 at 17:20

score 0 · Answer 1 · edited Dec 28 '16 at 18:52

0

Try changing:

scope: { "state": "=" },

to:

scope: { "state": "=state" },

edited Dec 28 '16 at 18:52

Cave Johnson

6,499
5
38
57

answered Dec 28 '16 at 16:12

Gabriel Ribeiro

33
3

Thanks for your reply. Unfortunately, no behaviour change. – Nicolas Dec 28 '16 at 16:24

score 0 · Answer 2 · answered Dec 28 '16 at 16:56

you need code similar this example:

http://codepen.io/anon/pen/MbNWWK

  angular
.module("starter", [])
.controller('TestController', ['$scope', function ($scope) {
  $scope.ctrl = this;
   $scope.state = [1,2,3];
  $scope.teste = "ABCD";
}])
.directive("criterionNews", function() {
  return {
    restrict: "E",
    scope: {
      state: "=state"
    },        
    template: '<ul><li ng-repeat="i in state">{{i}}</li></ul>'               
  };
});

Two instances of same directive interfering with each other?

2 Answers2