9

Consider two nested directives with isolate scopes:

<dctv1>
    <dctv2></dctv2>
<dctv1>

If I want dctv2 to talk to dctv1 I have may options:

  1. I may require the controller of dctv1 in the definition of dctv2 using the require:'^dctv1'
  2. I may call an expression on the parent scope with the wrapper <dctv2 callParent="hello()"></dctv2> and scope:{callParent:'&'}
  3. I can also use $scope.$emit in dctv2 but then all parent scopes will hear the message.

Now I want dctv1 to talk to dctv2.

  1. The only way I may accomplish this is to use $scope.$broadcast, but then all children will hear.

By talk to here i mean call a function or similar. Don't want to set up watches clogging the digestloop.

How can I make dctv1 notify dctv2 in the best way, making them loose-coupled? I should just be able to remove dctv2 without errors.

user1506145
  • 5,176
  • 11
  • 46
  • 75
  • If you chose the events. You can call preventDefault and stopPropagation. In fact $event is an instance of jQuery event. – Raulucco Feb 12 '15 at 13:39

4 Answers4

3

Take a look at AngularJS NgModelController for some ideas.

Each <dctv2> directive would require <dvtv1> to have it's controller injected. You can then add objects or callbacks to properties of that controller, and remove them when <dctv2> is destroyed.

<dvtv1> would not talk directly to children, but would trigger callbacks bound to it's properties.

For example;

NgModelController has $parsers and $formatters that are an array of function callbacks. You push your own functions into the array to extend that controllers behavior.

When NgModelController performs input validation it's basically talking to other directives via these properties.

Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • I support the main idea with the callback (each dctv2 instance will register its own callback), but I would leave NgModelController aside. – Benjamin Feb 12 '15 at 15:01
  • @Benjamin can you elaborate your idea further? – Wei-jye Jan 28 '16 at 09:54
  • @Wei-jye I just don't think that `NgModelController` is a good example here. I'd suggest using `require:'^dctv1'` to get a reference to the parent controller. Then, register to that parent (`dctv1.registerChild(self)`). Afterwards, dctv1 knows its children and can interact with them. – Benjamin Jan 29 '16 at 13:30
  • @Benjamin Yes I just did that. I used this method to do event registration and raise event. – Wei-jye Jan 31 '16 at 02:03
0

I would suggest using angular services. That way you can decouple your behavior into one or more services.

Take a look at this also : AngularJS : How to watch service variables?

Community
  • 1
  • 1
eenagy
  • 912
  • 1
  • 8
  • 22
0

One way is to make a Service/Factory that will communicate with the controllers that you want.

For example, here's a getter/setter Factory

.factory('factoryName', function () {

    var something = "Hello";

    return {

        get: function () {
            return something;
        },

        set: function (keyword) {
            something = keyword;
            return something ;
        }
    };

}])

And then in your controllers:

.controller('controllerOne', ['factoryName', function (factoryName) {
    $scope.test = factoryName.get();
}]);

.controller('controllerTwo', ['factoryName', function (factoryName) {
    $scope.test = factoryName.get();
    $scope.clickThis = function (keyword) {
        factoryName.set(keyword);
    };
}]);

I suggest reading up on this : Can one controller call another?

Community
  • 1
  • 1
eHx
  • 181
  • 2
  • 17
-1

You can manage it using an id for each child that have to be passed to the parent; the parent will broadcast back the event using that id: the child will do the action only if the id passed from the parent is the his own.

Bye

Giulio Molinari
  • 132
  • 6