AngularJS通过标签选择遵循指令的DOM元素

Posted 2023-05-09

【中文标题】AngularJS通过标签选择遵循指令的DOM元素

【英文标题】：AngularJS select DOM element which belogs directive by tag

【发布时间】：2016-12-11 19:00:41

【问题描述】：

有没有办法从我调用 select 命令中选择属于指令的 DOM 元素？

例如 - 我有两个指令。他们每个人都在指令view.html中得到了<input>。

view1.html

<input></input>

view2.html

<div>other input<div>
<input></input>

我在指令中声明了控制器，我用它来处理东西。

首先（从 view1 指令调用）

$scope.selectView1Input = function()
     var input = angular.element('input');

秒（从 view2 指令调用）

$scope.selectView2Input = function()
     var input = angular.element('input');

但在两种情况下，它都会选择相同的输入字段（我预料到他的行为，因为它看起来只是 dom 选择器，所以）

我不想使用ids。只是简单的标签，有没有办法做到这一点？

【问题讨论】：

为什么不使用 ng-model？

【参考方案1】：

您可以使用 jQuery 或内置的 jqLit​​e 来选择元素：

app.directive('myDirective', function() 
    return 
        restrict: 'A',
        link: function(scope, element, attr) 
            var input = element.find('input');
            …
        
    ;
);

【讨论】：

哦，我喜欢！我调用控制器函数 fon input chnage，并传递到我使用 .find() 函数找到的元素上的控制器函数链接！不错

【参考方案2】：

您可以在从指令调用函数时使用$event。 以 $event 作为参数调用函数。

ng-click="selectView1Input($event)"

（如果您在点击时调用该函数）。

您的函数将如下所示：

首先（从 view1 指令调用）

$scope.selectView1Input = function(event)
     var input = $(event.target);

秒（从 view2 指令调用）

$scope.selectView2Input = function(event)
     var input = $(event.target);

【讨论】：

ope 我不使用 click there

如何从表单中调用该函数？

这只是示例代码。实际上，我遇到了1st directive view 中的一个canvas 和2nd directive view 中的另一个canvas 的情况。想要在输入时获得第二个画布（在2nd view ofc 上）并用我写的文本更新它

在这种情况下使用 ng-model 可能会有所帮助。在两个输入指令中使用不同的模型。

还是不明白它对元素选择有什么帮助