Angular directive breaks scope?

Question

First off, I'm new to Angular, and realize that I may be missing a core concept...

Consider the jsfiddle: http://jsfiddle.net/D4dFv/

I'd like to be able to click on each link, and see the {{driveState.currentView}} update in the DOM.

Everything works fine until I add in a directive that helps me detect when all images on the page have loaded successfully. With that directive in place, the binding appears to break, and you can no longer click on each link and see driveState.currentView update.

Why is this?

To test this in the jsfiddle, note that the following works fine: <img width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'>

...and this breaks the data binding somehow: <img imageonload width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'>

Thanks in advance.

Davin Tryon · Accepted Answer · 2014-03-09 00:00:47Z

1

The reason is that the Directive is defining its own controller. This makes a new instance of the controller class and is somehow messing up the scope.

To fix, take out the controller: 'Ctrl', in the Directive definition.
Here is the new Directive code:

myApp.directive('imageonload', function () {

    return {
        restrict: 'A',
        link: function ($scope, element) {

            element.bind('load', function () {

                _viewsLoaded++;
                if (_viewsLoaded === $scope.appViews.length) {
                    alert('init layout here');
                }
            });
        }
    };
});

And an updated fiddle for you.

answered Mar 9, 2014 at 0:00

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

1 Comment

Chazbot Over a year ago

AGHHHH! I would have never seen that. I thought that was how I linked the controller to the directive. Thanks so much.

Collectives™ on Stack Overflow

Angular directive breaks scope?

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