Angular指令會破壞范圍嗎？

Question

首先，我是Angular的新手，意識到我可能缺少核心概念...

考慮一下jsfiddle： http ： //jsfiddle.net/D4dFv/

我希望能夠單擊每個鏈接，並在DOM中查看{{driveState.currentView}}更新。

一切正常，直到我添加一條指令，該指令可以幫助我檢測頁面上的所有圖像何時成功加載。 使用該指令后，綁定似乎中斷，您無法再單擊每個鏈接並查看driveState.currentView更新。

為什么是這樣？

要在jsfiddle中進行測試，請注意以下工作正常： <img width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'> 10'height <img width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'> 10'src <img width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'>

...這以某種方式破壞了數據綁定： <img imageonload width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'>

提前致謝。

Answer 1

原因是該指令正在定義其自己的控制器。 這將創建控制器類的新實例，並以某種方式弄亂了范圍。

要解決此問題，請刪除指令定義中的controller: 'Ctrl', 。
這是新的指令代碼：

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');
                }
            });
        }
    };
});

為您提供更新的小提琴 。