使用JQuery选择Angular生成的元素

时间:2017-01-11 11:38:09

标签: javascript jquery html angularjs angular-ui-router

以下是我的代码片段:

<body>
  <div class="body" ng-view></div>
  <div class="footer" ng-view="footer"></div>
</body>

以下HTML正在添加到上面代码段中的未命名视图中:

<div>
  <div class="myClass"></div>
  <div class="myClass"></div>
  <div class="myClass"></div>
</div>

具有该结构的原始代码按预期完美运行。当我尝试通过JQuery选择 .myClass 时,问题就出现了。我使用JQuery选择该类的原因是因为我想使用包含Scroll Magic的类的元素,如下所示:

var controller = new ScrollMagic.Controller();

jq(".myClass").each(function() {
  new ScrollMagic.Scene({
      triggerElement: this,
      duration: '50%'
  })
  .setPin(this)
  .addTo(controller);
});

在检查我的代码之后,我意识到body标签中的元素可以被JQuery拾取,但是那些在视图中呈现的元素却不是。我的猜测是,如果没有弄错的话,这个问题可以通过后期绑定技术来解决。

我的问题

  1. 我是否认为后期绑定可以解决这个问题?
  2. 如何构建上面的代码以便能够在ng-views中选择元素?
  3. 有没有更好的方法可以在没有JQuery的情况下完成上述期望的任务?
  4. 如果后期绑定是我的解决方案,我如何在each()语句中执行后期绑定?

1 个答案:

答案 0 :(得分:0)

你在做什么是不对的。你有两种选择来做你想做的事情

1)创建指令

您的最佳选择是创建自己的指令

https://docs.angularjs.org/guide/directive

<div>
  <div scroll-magic scroll-magic-controller='controller' class="myClass"></div>
  <div scroll-magic scroll-magic-controller='controller' class="myClass"></div>
  <div scroll-magic scroll-magic-controller='controller' class="myClass"></div>
</div>

你的HTML将是

public int[] swapArrayElement(int arr[], int a, int b) {
        int index1;
        for (int i = 0; i < arr.length; i++) {
            if (arr[i] == a || arr[i] == b) {
                index1 = i;
                if (arr[i] == a) {
                    for (int k = index1; k < arr.length; k++) {
                        if (arr[k] == b) {
                            arr[k] = arr[index1];
                            arr[index1] = b;
                        }
                    }
                    return arr;
                } else if (arr[i] == b) {
                    {
                        for (int k = index1; k < arr.length; k++) {
                            if (arr[k] == a) {
                                arr[k] = arr[index1];
                                arr[index1] = a;
                            }
                        }
                    }
                    return arr;
                }

            }

        }
        return arr;
    }

2)使用现有的角度库

我找到了一个可以使用的库。它只是一个包装现有js库的角度库

https://github.com/homerjam/angular-scroll-magic