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'>

...这会以某种方式打破数据绑定： <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');
                }
            });
        }
    };
});

并为您updated fiddle。

Angular指令打破范围？

1 个答案: