element.find 不适用于 ng-switch 中的嵌套元素

Question

我有一个包含ng-switch DOM 元素的指令。我需要将事件绑定到 ng-switch 下的 DOM 节点，但由于某种原因 element.find 不会返回 switch 元素下的任何节点！

在下面的示例中，我希望 element.find("*") 返回 ng-switch、一个 div 和按钮，但它只返回 ng-switch 和按钮。

我该如何解决这个问题？或者以不同的方式从链接函数到达 ng-switch 下的 DOM 节点？

要重现的代码：

HTML

<div ng-controller="myCtrl" class="container">
    <div my-directive>
        <ng-switch on="selection">
            <div ng-switch-when="A" class="a">A</div>
            <div ng-switch-when="B" class="b">B</div>
            <div ng-switch-default>default</div>
        </ng-switch>        
        <button ng-click="switchSelection()" >switch</button>
    </div>
</div>

JS

angular.module('myApp', [])
    .directive("myDirective", function () {
    return {
        link: function(scope, element, attrs) {
            console.log(element.find("*"));
            console.log("Didn't find my divs :(");
        }
    }
});


function myCtrl($scope) {
    $scope.selection="B";

    $scope.switchSelection=function(){
        if ($scope.selection=="B"){
            $scope.selection="A";
        }
        else{
            $scope.selection="B";
        }
    }
}

jsFiddle example

Answer 1

根据您在评论中询问如何将加载事件绑定到图像（如果它在开关内）的问题。

你可以做的是为图像创建一个指令，然后在链接函数中绑定加载事件

.directive("myImageDirective", function(){
    return {
        restrict: 'C',
        link: function(scope, element){
            element.bind("load", function(){
                console.log("element loaded");
                scope.$apply();
            });
        }
    };
});

jsfiddle：http://jsfiddle.net/kB4vq/

范围.$apply();如果你也需要它，就是让 Angular 知道重新处理自己，因为负载发生在 Angular 的知识之外。你可以在这里阅读更多内容：http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply