ng-click 不从 DOM 中获取参数 [英] ng-click doesn't take parameters from the DOM

问题描述

我有以下代码:

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

在我的 JS 中:

$scope.Create = function (id){如果(id === 未定义){$scope.data = "你必须指定一个id";} 别的 {$scope.data = 数据；控制台日志(数据)；});}};

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

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

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

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

为什么会发生这种情况，如何在不将值行放入方法中的情况下做到这一点?

谢谢

解决方案

这只是评论和其他答案的扩展，您可以使用 angular 以多种方式实现这一点，一个简单的例子可能是:-

 <div ng-controller="MainCtrl"><!-- 为您的文本输入提供模型绑定--><input ng-model="userEntry" type="text"/><!-- ng-click 传递您需要传递的任何参数，前提是它是一个可以针对范围或任何常量进行评估的表达式 --><button data-action="bea" ng-click="Create(userEntry);"class="btn">插入 ID</button><!-- 一些使用插值的简单数据绑定-->{{数据}}<!-- 仅用于范围内项目列表上的中继器演示--><div ng-repeat="item in items track by $index">{{item}}</div>

示例演示

我最初尝试做的事情的 2 美分:-

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

• ng-model
• ng-binding
• 控制器
• 所有关于 ngmodel 控制器

I have the following code:

<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>

In the JS I have:

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

When the call gets into the Create function the value of the id is undefined.

If I add the following line at the beginging of the Create function everything works ok:

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

If I send a constant value it works:

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

Why is this happening and how can I do that without putting the line of value into the method?

Thanks

解决方案

This is just an extension of comments and other answers, You could achieve this in many ways using angular, one simple example could be:-

  <!-- 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

My 2 cents on the lines of what were originally trying to do:-

Use angular bindings instead of accessing DOM directly for getting the data, it really helps you deal with just the data without worrying about how to access or render it in DOM. If you think you need to access DOM for implementing business logic re-think on the design, if you really need to do it, do it in a directive. Angular is very opinionated on the design and when where you do DOM access.

• ng-model
• ng-binding
• controller
• all about ngmodel controller

这篇关于ng-click 不从 DOM 中获取参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！