Angular directive isolate scope: scope function won't execute

Question

I'm having trouble understanding how to define functions to be used by (or inside of) a directive that has an isolate scope. In the following code, why doesn't the $scope.foo() function execute? Is there a correct way that I should be approaching this problem? I'm looking to make a button that is visible only if a user is logged in, and was thinking that a directive would be a nice way to encapsulate/isolate that functionality.

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.4.2/angular.js"></script>
  <script>
    angular.module('MyApp', [])
      .directive('myScopedDirective', function() {
        return {
          scope: {}, // <!-- isolate scope breaks things
          controller: function($scope) {
            // isolate scope prevents this function from being executed
            $scope.foo = function() {
              alert('myScopedDirective / foo()');
            };
          }
        };
      });
  </script>
</head>

<body>
  <div ng-app="MyApp">
    <!-- button doesn't work unless isolate scope is removed -->
    <button my-scoped-directive ng-click="foo()">directive container - foo()</button>
  </div>
</body>

</html>

Plunker: http://plnkr.co/edit/Sm81SzfdlTrziTismOg6

logee · Accepted Answer · 2015-07-09 00:10:28Z

4

It's not working because you are using 2 directives in different scopes, ngClick and myScopedDirective. You need to create a template for your directive and call the click function like so:

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.4.2/angular.js"></script>
  <script>
    angular.module('MyApp', [])
      .directive('myScopedDirective', function() {
        return {
          restrict: 'AE', // Can be defined as element or attribute
          scope: {},
          // Call the click function from your directive template
          template: '<button ng-click="foo()">directive container - foo()</button>',
          controller: function($scope) {
            $scope.foo = function() {
              alert('myDirective / foo()');
            };
          }
        };
      });
  </script>
</head>

<body>
  <div ng-app="MyApp">
    <my-scoped-directive></my-scoped-directive>
  </div>
</body>

</html>

Working plunker

edited Jul 9, 2015 at 0:10

answered Jul 8, 2015 at 23:52

logee

5,0321 gold badge29 silver badges36 bronze badges

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

1 Comment

YellowShark Over a year ago

Thank you! That makes good sense, I didn't consider the fact that ng-click is a directive and thus has its own scope, which is completely separatefrom the one created by my directive - that's pretty reasonable. I also verified a that a different approach works: hooking on to $element in the controller, and adding a click-listerner, rather than using ng-click at all, like so: plnkr.co/edit/vC1OUzlZr3a7YVLfpD6Q . OK thanks very much again!

Collectives™ on Stack Overflow

Angular directive isolate scope: scope function won't execute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related