来自控制器的视图上下文中的 dom 元素

Posted 2023-05-09

【中文标题】来自控制器的视图上下文中的 dom 元素

【英文标题】：The dom element in context of view from the controller

【发布时间】：2015-02-02 10:24:42

【问题描述】：

我有一个角度视图中的表格。在表单上的按钮中，我添加了一个使用 $http 向服务器发送请求的事件。在将请求发送到服务器之前，我需要使用 jQuery Validate 验证表单。

为了验证表单，我需要控制器中表单的 dom 引用。我的应用程序中已经有 jQuery。因此可以使用

获取表单的引用

$(selecter) or angular.element($(selecter))

但在这两种情况下，它都会搜索整个文档以获取元素的引用。相反，我需要在视图的上下文中搜索元素，这将提高性能。

我已经看到了 $element 在 Angular 中的使用。但是后来我看到不推荐使用 $element 并且在新版本的 angular 中可能会贬值。当我试图在控制器中获取 $element 时，我遇到了一个错误。所以我猜它已经贬值了。

那么从控制器的视图上下文中获取 dom 元素的最佳方法是什么？

【参考方案1】：

正如米卡莱所说。要操作任何元素，您必须创建指令（这是角度方式..）

举个例子：

html <input type="text" select-all value="test" />

指令

app.directive('selectAll', function () 
return 
    restrict: 'A',
    link: function(scope, element, attrs) 
        element.on('click', function() 
            this.select();
        );
    ;
);

这个指令只选择文本元素中的所有文本。

更新：

我已经为你创建了plunker。这是你要求的吗？

更新 2

我刚刚意识到，我们根本不需要 eval。我不知道，为什么我把它放在首位。 eval 也可能是有害的。

看看这个plunker。

【讨论】：

在这种情况下，对于我的应用程序中的每个表单，我必须创建一个新指令。所以如果我可以使用控制器来做到这一点会更好。

或者你可以在控制器中声明函数，然后在指令中通过 attrs 传递它们的名称，并在指令中使用 eval('var fn = + 'attrs.function) 来使用它们？我不知道，只是在想:)

其实我是 angular js 新手，能否请你在 plunkr 或 jsfiddle 中添加一些代码。

再次检查我的答案。这是你需要的吗？

【参考方案2】：

不建议在控制器的视图上下文中使用 dom 元素。要访问 dom，您应该创建角度指令。