Javascript 函数不会影响 Angular 模板答案

【问题标题】：Javascript function does not affect Angular templatesJavascript 函数不会影响 Angular 模板
【发布时间】：2017-05-16 02:40:15
【问题描述】：

我已经建立了一个简单的 Angular 项目，其中有一个基本模板。这个基本模板导入了所有必要的库，并在其中运行了一个简单的 jQuery 函数。像这样的：

<html ng-app='myApp'>
    <body>
        <div><input type="text"></div>
        <div ng-view></div>
        // Imports
        <script>
            (function() {
                $('input').each(function() {
                    $(this).addClass('doSomething');
                });
            })();
        </script>
    </body>
</html>

因此，基本上，该函数将一个类添加到我的 DOM 中的所有输入元素。 ng-view 之外的第一个输入元素受此函数影响。

但是，假设我的 ng-view 模板中有输入元素，这些元素奇怪地不受函数的影响。这是为什么？看来我的 jQuery 函数无法访问我的 Angular 模板的 DOM。

有解决办法吗？运行可能影响 Angular 模板的通用函数的理想方法是什么？

谢谢。

【问题讨论】：

你为什么不做（或搜索是否已经存在）一个指令？
为每个输入添加一个类似乎你应该使用一个简单的 CSS 类：input { your_code }
@Maxime 为什么你更喜欢使用元素名称作为选择器而不是类？
@1252748 因为如果你必须使用一些 javascript 在任何地方插入该类，为什么不使用 css 选择器？
addClass 显然只是为了这个问题。真正的函数做了很多其他的事情，我不想为这个问题包含额外的 15 行以上的代码。

标签： javascript jquery angularjs dom

【解决方案1】：

模板并没有以某种方式隐含地“包含”；它们由动态的角度代码构建（并且可能基于异步事件，例如在主页 onload 事件触发后发生的 http 请求）。因此，除非您以某种方式与 angular 合作，否则您不能保证 DOM 将由 angular 构建。

解决这个问题的“正确”方法可能是为添加类的“输入”标签编写一个角度指令（而不是像上面那样使用 jQuery）；当然这是添加事件侦听器等的“正确”方式。

【讨论】：