Question

注意：与上述内容不重复。上面是访问clicked元素，这个问题是关于访问不同的元素。

问题

如何将html文档中的元素（不是单击的元素）传递给ng-click中的Angular范围方法？

HTML：

<body ng-app="myApp">
  <div ng-controller="myController">
    <input type='text'></input>
    <button ng-click="clickHandler($('input'));">One</button>
    <button onclick="alert(typeof $('input'));">Two</button>
  </div>  
</body>

JavaScript的：

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
    $scope.clickHandler = function(el) {
        alert(typeof el);
        // real code work with element---set focus
    }
});

在此示例中，当您单击使用onclick的第二个按钮时，您将获得＆＃34; object＆＃34;。当您点击通过ng-click的第一个按钮时，您将获得＆＃34; undefined＆＃34;。

我试图避免将jQuery代码本身移动到控制器或一般用于Angular以保持可测试性。

修改

我的原始示例使用jQuery查找<button>容易处理的第一个$event元素。这实际上并不表示我想要解决的问题，而是将我的实际问题翻译成简单的可重现的错误。

链接的重复项不是同一个问题。

Answer 1

jQuery选择器不是有效的角度表达式，但它清楚地告诉我你要做什么。

我能想到的唯一方法是在范围上分配输入元素：

HTML：

<body ng-app="myApp">
  <div ng-controller="myController">
    <input type='text'></input>
    <button ng-click="clickHandler(input);">One</button>
    <button onclick="alert(typeof $('input'));">Two</button>
  </div>  
</body>

JavaScript的：

var app = angular.module('myApp', []);

app.controller('myController', function($scope, $element) {
    $scope.input = $('input', $element);

    $scope.clickHandler = function(el) {
        alert(typeof el);
    }
});

Demo FIDDLE

<强> [编辑]

更好的选择

我不确定为什么要将视图元素传递给单击处理程序。也许有一种更好的方式 - 例如;传递输入元素绑定的模型。

HTML：

<body ng-app="myApp">
  <div ng-controller="myController">
    <input type='text' ng-model="name"></input>
    <button ng-click="clickHandler(name);">One</button>
  </div>  
</body>

JavaScript的：

app.controller('myController', function($scope, $element) {
    $scope.name = 'John';

    $scope.clickHandler = function(model) {
        if (model == 'Tim') {
            alert("No!!! You're John!");
            $scope.name = 'John';
        }
    }
});

通过传递模型并操纵绑定到输入的模型，视图（输入元素）会自动更新。这更有棱角，更少jquery。

在ng-click里面的jQuery传递html元素引用

1 个答案: