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 [http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/] please check with this. — Jinna Balu, Dec 11 '15 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 - http://stackoverflow.com/questions/34229868/improve-angularjs-directive-code/34229936#34229936 — jusopi, Dec 12 '15 at 06:07

score 0 · Answer 1 · answered Dec 11 '15 at 15:28

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 '15 at 15:28

lex82

11,173
2
44
69

thank you... it's pretty straightforward, but then how can I call the stopSpinner() method? – pardie Dec 11 '15 at 15:39
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. – lex82 Dec 11 '15 at 15:50
mm... I feel a little dumb, but I can't get it work or I misunderstood your advice... I updated the plunkr here: (http://plnkr.co/edit/RIMya1aGXpK6K8cgL4TW?p=preview) – pardie Dec 11 '15 at 16:20
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. – pardie Dec 11 '15 at 16:47
This does not sound like a problem. Just give the function a callback that stops the spinner once the async function has completed. – lex82 Dec 11 '15 at 17:34

Isolating scope in AngularJS directive

1 Answers1