Question

我很有棱角并且遇到问题我无法获得包含在我放置指令的元素中的子元素。事实是，这个子元素位于通过我的路由器填充的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，当我显示'可移动'的内容时，我可以看到我的孩子还没有被渲染（我可以看到所有的ng评论而不是结果）。

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

任何想法对我都有帮助！

PS：我正在使用角度为

的jQuery

Answer 1

您的指令位于ng-view之外（它是ng-view的父级）并且它正在尝试查找ng-view指令动态插入的元素。

一旦你的角度模块被初始化，你的指令就被初始化了，那时ng-view还没有机会加载部分（由于获取部分的异步性质），因此没有您的发现者可以使用子元素。

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

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

Answer 2

Angular没有像.find那样详细（如jquery。你可以使用常规的dom queryselector：

var movable = element[0].querySelectorAll("#moveWrapper")
console.log(movable.length)

在angular指令中查找元素子元素

2 个答案: