ng-click 不从 DOM 获取参数答案

【问题标题】：ng-click doesn't take parameters from the DOMng-click 不从 DOM 获取参数
【发布时间】：2014-10-16 10:14:34
【问题描述】：

我有以下代码：

<input id="id">
<button data-action="bea" ng-click="Create($('#id1')[0].value);" class="btn">Insert ID</button>
<button data-action="bea" ng-click="Create($('#id2')[0].value);" class="btn">Insert ID</button>

在我的 JS 中：

$scope.Create = function (id){
        if (id === undefined) {
            $scope.data = "You must specify an id";
        } else {
                $scope.data = data;
                console.log(data);
            });
        }
    };

当调用进入 Create 函数时，id 的值是未定义的。

如果我在 Create 函数的开头添加以下行，一切正常：

id = $('#id')[0].value;

如果我发送一个常量值，它会起作用：

<button data-action="bea" ng-click="Create('SomeID');" class="btn">Insert ID</button>

为什么会发生这种情况？如果不将价值线放入方法中，我该如何做到这一点？

谢谢

【问题讨论】：

对我来说为什么它应该工作毫无意义！！仍然在广泛的直接 DOM 访问和操作的世界中？ This answer 应该可以帮助你重新思考......
@PSL 这不是一个很有用的评论。我知道你发给我的链接。你能解释一下我做错了什么吗？
这取决于你认为什么是有用的。您在没有完全理解角度概念的情况下混合事物。在控制器的角度世界中，您并没有真正访问 DOM 元素，而是进行数据绑定并让角度管理 DOM。如果您阅读该链接，它将清除很多事情。 #id 的元素是什么？输入正确吗？所以你只需在你的控制器中做<input type="text" ng-model="myModel" />，你只需访问它的值$scope.myModel。 Angular 在所有这些事情上都更加固执己见。
这里是一个例子，你可以用 angular plnkr.co/edit/IemE00?p=preview 来做到这一点
感谢您的样品。我尝试过这个。我对这个解决方案的问题是，如果我有超过 1 个输入，我不能使用相同的方法，因为我使用的是显式名称。还是我错了？

标签： javascript html angularjs angularjs-scope angularjs-ng-click

【解决方案1】：

这只是 cmets 和其他答案的扩展，您可以使用 angular 以多种方式实现此目的，一个简单的示例可能是：-

  <!-- Add a controller -->
  <div ng-controller="MainCtrl"> 
     <!-- Give a model binding to your text input -->
     <input ng-model="userEntry" type="text"/> 
     <!-- ng-click pass which ever argument you need to pass, provided it is an expression that can be evaluated against the scope or any constants -->
     <button data-action="bea" ng-click="Create(userEntry);" class="btn">Insert ID</button>
    <!-- Some simple data binding using interpolation -->
    {{data}}
     <!-- Just for demo on repeater on a list of items on the scope -->
     <div ng-repeat="item in items track by $index">{{item}}</div>
  </div>

Example Demo

我的 2 美分就在最初想要做的事情上：-

使用角度绑定而不是直接访问 DOM 来获取数据，它确实可以帮助您只处理数据而无需担心如何在 DOM 中访问或呈现它。如果您认为需要访问 DOM 以实现业务逻辑，请重新考虑设计，如果您确实需要这样做，请在指令中执行。 Angular 对设计以及何时访问 DOM 非常有主见。

【讨论】：

看看角度验证、解析器、格式化程序、动画以及很多很多东西。官方文档很好入门，也有很多例子。

【解决方案2】：

这不是你在 AngularJS 中应该做的事情。如果你想使用 AngularJS，你真的应该在 Angular 中思考。参考这篇文章（"Thinking in AngularJS" if I have a jQuery background?）

所有的 DOM 操作都应该在指令中完成。请参阅我发现非常清楚的此页面。 (http://ng-learn.org/2014/01/Dom-Manipulations/)

【讨论】：

糟糕，我在我的 cmets 中也提到过类似的东西，但 OP 不喜欢它.. :/
@PSL OP 不喜欢这样，因为它没有解释我做错了什么以及如何解决它。 :)
哈哈对不起，我认为你的答案可能会有所帮助！应该更明确..
@PSL 从 JQuery 思维转向 AngularJS 需要一些时间。可以理解。如果他能阐明他想要做什么，也许人们可以建议如何使用 Angular 拥有的内置指令来完成。
@lookman +1 表示与我有相似的观点开始...... :) 是的，我同意你的看法。

【解决方案3】：

我的猜测是 $ 在评估 ng-click 值时没有绑定到 jQuery 函数，因为它没有暴露在 Angular 范围内。

解决方案：

在某个范围内公开 jQuery 函数，例如控制器中的$scope.$ = $;。
按照您的建议使 Create 函数无参数，并以 var id = $('#id')[0].value; 开头
我最喜欢的：避免使用 jQuery。如果您将一些数据放在 #id 元素中，则可能有一种比查询 DOM（例如 Angular 服务）更自然和 AngularJS 惯用的方式来检索它。

特别是，如果您要定位的元素是 <input> 元素，则使用 ngModel 指令将该值链接到可在控制器中访问的 $scopeproperty：

<input ng-model="inputData"/>

【讨论】：

那是什么？是 PSL 建议的吗？
是的，基本上你的控制器不应该知道你的视图。它只是公开数据以供您的视图表示。问题是：这个元素的内容是从哪里来的？
我什至不会考虑 #1 和 #2 要点。 #3) 取决于您想在何时何地使用它。
@PSL ：同意，#1 和 #2 对我来说是 hacks。
我要的数据来自用户。那里可能有超过 1 个输入标签。

【解决方案4】：

您尝试作为 create 函数的参数传递的 JavaScript 在 Create 函数的范围内不可用。

尝试以不同的方式定位元素。

这有帮助吗？

【讨论】：

为什么 javascript 在 Create 函数的范围内不可用？