javascript - ng-click 不从 DOM 获取参数

Question

我有以下代码:

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

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

谢谢

Answer 1

这只是评论和其他答案的扩展，您可以使用 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 美分在最初尝试做的事情上:-

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

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