Isolating scope in AngularJS directive

Question

I'm pretty new with Angular and I'm trying to write my own directive to learn how these objects works. My problems regard on how isolate the scope of my directive so I can use it many times in the same controller.

I created a plunker here to better explain the situation: http://plnkr.co/edit/NsISESR9sIs5Nf577DX4?p=preview

html:

<body ng-controller="MainCtrl">
  <button id="button1" ng-click="dummyClickFoo()" wait-button>Foo</button>
  <button id="button2" ng-click="dummyClickBar()" wait-button>Bar</button>
</body>

js:

app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
    $scope.dummyClickFoo = function() {
        $scope.startSpinner();

        setTimeout(function() {
                $scope.stopSpinner();
          }, 3000);
    };

    $scope.dummyClickBar = function() {
        $scope.startSpinner();

        setTimeout(function() {
                $scope.stopSpinner();
          }, 3000);
    };
});


app.directive('waitButton', function() {
    return {
        restrict: 'A',
        controller: ['$scope', '$element', function($scope, $element) {
            $scope.startSpinner = function() {
                alert($element.attr('id'));
            };

            $scope.stopSpinner = function() {
                alert($element.attr('id'));
            };
        }]
    };
});

Basically it works with one button but it doesn't works with two buttons, I know I should isolate their scope but I don't know how... I've seen examples around, but they use extra-attributes to pass variables while I need to call my internal method.

Can someone help me to figure out how to do it? Thank you!

I found clear explanation in [undefinednull.com/2014/02/11/… please check with this. — Jinna Baalu
– Jinna Baalu, Commented Dec 11, 2015 at 15:33
@wizzy, I think you may have duplicated your question.... I answered on the other one but will reference it here as well. Please see this answer - stackoverflow.com/questions/34229868/… — jusopi
– jusopi, Commented Dec 12, 2015 at 6:07

lex82 · Accepted Answer · 2015-12-11 15:28:42Z

0

You create an isolate scope by setting scope: {} in your directive definition.

You will then not be able to call startSpinner and stopSpinner from your controller and you shouldn't! Use ng-click in your directive or bind the click handler in the directive and not in the controller. Since your directive has no markup I suggest you do the latter:

// added after the directive controller definition
link: function(scope, element) {
   element.on("click", function() { scope.startSpinner() });
}

answered Dec 11, 2015 at 15:28

lex82

11.3k2 gold badges47 silver badges72 bronze badges

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

5 Comments

pardie Over a year ago

thank you... it's pretty straightforward, but then how can I call the stopSpinner() method?

lex82 Over a year ago

excactly like oyu did it before. you can also set a timeout in the click handler. scope.startSpinner() was just an example because I was to lazy to type all the code.

pardie Over a year ago

mm... I feel a little dumb, but I can't get it work or I misunderstood your advice... I updated the plunkr here: (plnkr.co/edit/RIMya1aGXpK6K8cgL4TW?p=preview)

pardie Over a year ago

I understand your point... but I need the stopSpinner() to be outside callable because where now I put the setTimeout there will be an async function... so I need, when this function is completed, to call the stopSpinner to stop the spinner of the button who called it.

lex82 Over a year ago

This does not sound like a problem. Just give the function a callback that stops the spinner once the async function has completed.

Collectives™ on Stack Overflow

Isolating scope in AngularJS directive

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related