angularjs - 在 Angular 指令中查找元素子元素

Question

我对 Angular 很陌生，面临一个问题。
我无法获取我放置指令的元素中包含的子元素。 事实上，这个子元素位于通过我的路由器填充的 ng-view 元素内部。

我的指令如下:

app.directive('myMouseScroll', function(){

    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            scope.lock = false;
            scope.current = 0;

            var movable = element.find('#moveWrapper');
            console.log(movable.length);

            // ...
        }
    }
});

日志显示0，当我显示'movable'的内容时，我可以看到我的 child 还没有渲染(我可以看到所有ng评论，但看不到结果)。

我看到一些主题谈论使用 $timeout 但我无法让它在我的情况下工作......

任何想法都会对我有帮助!

PS:我正在使用 jQuery 和 Angular

Answer 1

您的指令位于 ng-view 之外(它是 ng-view 的父级)，并且它试图查找由 动态插入的元素>ng-view 指令。

一旦你的 Angular 模块初始化，你的指令就会被初始化，而那时ng-view还没有机会加载部分(由于获取部分的异步性质) )，因此您的查找器没有可用的子元素。

您需要指示您的指令仅在 ng-view 完成加载和嵌入部分后才运行其逻辑。这可以通过观察每次 ng-view 完成加载部分时触发的 $viewContentLoaded 事件来完成:

app.directive('myMouseScroll', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){

      function myFunction(){

        scope.lock = false;
        scope.current = 0;

        var movable = element.find('#moveWrapper');
        console.log(movable.length);

        // ...
      }

      scope.$on('$viewContentLoaded', myFunction);
    }
  };
});