angular Send event to directive

Question

I'd like to send an event from my view controller to the directive (I'd like to program a general alert-box which can receives alerts via event of the outer view controller). I did the following:

In my view template I added the directive:

html template of view:

<alert-box></alert-box>

in the view controller:

$scope.$broadcast('add-alert', {type: 'danger', msg: message});

My directive:

.directive(
'alert-box', [function () {
    return {
      restrict: 'E',
      templateUrl: '/directives/alert-box.html',
      scope: false,
      controller: [
        "$scope",
        function ($scope) {

          $scope.alerts = [];

          $scope.$on('add-alert', function(event, arg) {
            $scope.addAlert(arg);
          });

          $scope.addAlert = function (alert) {
            $scope.alerts = [];
            $scope.alerts.push(alert);
          };

          $scope.closeAlert = function (index) {
            $scope.alerts.splice(index, 1);
          };
        }]
    }
  }
]);

According to the docs, you should declare scope: false so that you inherit the scope from the outer controller-scope. Since I use $broadcast which should propagate the event down the hirachy I would except this to work, but it doesn't. My only thought is, that the controller inside the directive always creates an isolated scope.(?)

Your directive should be named as alertBox not alert-box inorder to be able to use it in the view as alert-box. Directive names should follow camel casing naming convension. Marking for closure as typo. And see it working here — PSL
– PSL, Commented Jan 4, 2015 at 17:52
@PSL I know you should not say thank you on SO in comments so... yea, I just missed that... )-: — morpheus05
– morpheus05, Commented Jan 4, 2015 at 17:58

Gent · Accepted Answer · 2015-01-04 18:07:36Z

1

Your example shows a mismatch in naming, the directives name should be alertBox instead of alert-box to have the tag be

edited Jan 4, 2015 at 18:07

answered Jan 4, 2015 at 17:51

Gent

2,6851 gold badge24 silver badges34 bronze badges

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

5 Comments

PSL Over a year ago

You saw my comment... Just in time.. :) before the 5 minute edit time huff... Your answer is incorrect regardless. You do not need to do scope.$apply for this purpose and your statement when handling async events it requires wrapping the code with a $apply to get angular to re-render the view is completely wrong.

Gent Over a year ago

@PSL just saw your working example, feel free to add an answer for morpheus05 and I will delete mine if you want to get the answer. I am just used to having a similar problem using events.

PSL Over a year ago

Sorry, i will not be adding an answer since i believe it is a typo and have marked for closure for typo. But since you have updated your answer to remove the incorrect statement i would remove my downvote.. :)

Gent Over a year ago

@PSL I just modified your example to show you what I was talking about here, obviously inside of angular code you would use $timeout to automatically kick off the digest. However, when the event is raised from outside the angular lifecycle, like via a transport abstraction you will need to use $apply to kick off the digest. Hope this helps you one day :D

PSL Over a year ago

What u are saying is the basic of angular. Question has nothing to do with that. Also ur statement was incorrect async events has nothing to do with that. All that matters is whether the binding updated outside angular context needs to be in sync with Dom and that's when u manually trigger digest cycle.

Collectives™ on Stack Overflow

angular Send event to directive

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