Angular how to change controller scope from onclick directive

Question

Here is my directive

.directive('closeMapMessage', function($log) {
  'use strict';
  return function(scope, element) {
    var clickingCallback = function() {
    angular.element('.map').fadeOut("slow");
    };
    element.bind('click', clickingCallback);
  };
})

How can I change a scope variable in the controller ?

<div class="msg-mobile" ng-show="showInstructionModal">
  <div class="close-map-msg ok-got-it-footer" close-map-message>Ok, got it. </div>
</div>

I basically want to set my showInstructionModalfalse when my close directive is called.

What about scope.showInstructionModal = false; scope.$apply(); at the end of your directive? — tymeJV
– tymeJV, Commented Apr 14, 2015 at 13:27
Why aren't you using angular modals? Or ngClick for that matter? — thomaux
– thomaux, Commented Apr 14, 2015 at 13:31
@Anzeo DOM manipulation should be done using directive, so he used directive which is correct — Pankaj Parkar
– Pankaj Parkar, Commented Apr 14, 2015 at 13:51
@pankajparkar There's no DOM manipulation here. It's a directive to fade out a modal and close it. That can be tackeled either by using Angular UI's modal service or alternatively could be fixed by adding a ng-click attribute and a ng-class that will toggle the fade out. — thomaux
– thomaux, Commented Apr 14, 2015 at 14:07
@Anzeo I looke ` angular.element('.map')` before applying fadeOut() ,thats why i love to use directive — Pankaj Parkar
– Pankaj Parkar, Commented Apr 14, 2015 at 14:08

thomaux · Accepted Answer · 2015-04-14 14:34:37Z

From the current snippet of code, it's hard to tell why you're not using a modal solution tailored for Angular, i.e. AngularUI's modal.

However, in your current code, you're attaching a click event to the element outside of Angular's awareness. That's why clicking on the element will not have effect until the next $digest cycle has run. Also, in Agular you normally don't use directives the way you're trying to do. I would suggest updating the directive to also provide the HTML and then use the ng-clickattribute to attach the event handler via Angular.

Update your directive's code to:

.directive('closeMapMessage', function($log) {
  'use strict';
  return {
      restrict: "AE",
      link: function(scope, element) {
         scope.closeModal = function() {
             angular.element('.map').fadeOut("slow");
             scope.showInstructionModal = false; // probably need to put this in a $timeout for example to show the fading of the element
         };
      },
      template: '<div class="close-map-msg ok-got-it-footer" ng-click="closeModal()">Ok, got it.</div>'
  };
})

And then update your HTML accordingly:

<div class="msg-mobile" ng-show="showInstructionModal">
  <close-map-message></close-map-message>
</div>

Pankaj Parkar · Accepted Answer · 2015-04-14 13:37:44Z

0

You should run digest cycle manually after click event occurrence to update all scope bindings

.directive('closeMapMessage', function($log) {
  'use strict';
  return function(scope, element) {
    var clickingCallback = function() {
      angular.element('.map').fadeOut("slow");
      scope.$apply();
    };
    element.bind('click', clickingCallback);
  };
})

answered Apr 14, 2015 at 13:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

Angular how to change controller scope from onclick directive

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related