我可以将ng-click指令放在JS文件而不是HTML文件中，我应该怎么做？

JS code:

var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope) {
    $scope.names = ['Larry', 'Curly', 'Moe'];

    $scope.removeName = function(name) {
        var i = $scope.names.indexOf(name);
        $scope.names.splice(i, 1);
    };
});

HTML code:

<html ng-app="nameApp">
    <body ng-controller="NameCtrl">
        <ul>
            <li ng-repeat="name in names">{{name}}
                <a href="" ng-click="removeName(name)">remove</a>
            </li>
        </ul>
    </body>
</html>

This is only a sample code. I want to know if I can put ng-click directive in JS file instead of HTMl file and how should I do it. Something similar to what I did in an example when I separted logic from HTML.

这只是一个示例代码。我想知道我是否可以在JS文件而不是HTMl文件中放置ng-click指令,我该怎么办呢。当我从HTML中分离逻辑时,类似于我在示例中所做的事情。

$(a).click(function(){
    $(this).removeName(name);
}

4 个解决方案

#1

I'd prefer using ng-click, instead of binding the event the jQuery way.

我更喜欢使用ng-click,而不是使用jQuery方式绑定事件。

But, as you asked: you can inject your controller's $element, and bind the on event on it, see:

但是,正如您所问:您可以注入控制器的$元素,并在其上绑定on事件,请参阅:

var app = angular.module("click", []);
app.controller("ctrl", function($scope, $element) {
    $element.on("click", function() {
        alert("clicked!");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="click">
  <div ng-controller="ctrl">
    <input type="text" />
  </div>
</div>

#2

You can do it by ng-bind-html, but my sample is looking like crazy. but it's working for me without using ng-click in html side

你可以用ng-bind-html来做,但我的样本看起来很疯狂。但它没有在html端使用ng-click为我工作

var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope) {      

    $scope.names = ['Larry', 'Curly', 'Moe'];

        $scope.ValOfRept = [];
        for (var x = 0; x < $scope.names.length; x++) {
            var element = '<a href=\"javascript:void(0);\" ng-click=\"removeName(valofrept)\">remove</a>';
            var obj = { "name": $scope.names[x], "element": element };
            $scope.ValOfRept.push(obj);
        }


        $scope.removeName = function (name) {
            var i = $scope.names.indexOf(name);
            $scope.ValOfRept.splice(i, 1);
        };

});
nameApp.filter('to_trusted', ['$sce', function ($sce) {
     return function (text) {
         return $sce.trustAsHtml(text);
     };
 }]);;

Html

<div ng-repeat="valofrept in ValOfRept">
        {{valofrept.name}}
      <div ng-bind-html="valofrept.element  | to_trusted"></div>
        <br />
    </div>

#3

you can use angular.element() in place of $()

你可以使用angular.element()代替$()

Sample code:

<ul>
 <li ng-repeat="name in names">{{name}}
       <a href="" id="clickme" ng-click="removeName(name)">remove</a>
  </li>
</ul>

and in js

并在js

angular.element("#clickme").bind("click", function(e){
          $scope.removeName();
       });

#4

-2

"I want to know if I can put ng-click directive in JS file instead of HTMl file..."

“我想知道我是否可以在JS文件而不是HTMl文件中添加ng-click指令......”

Precisely the place to directives is in html no js. When you use jquery your html code is like

准确地说,指令的位置是html no js。当您使用jquery时,您的html代码就像

<input type="button" value="x" id="test" onclick="$(this).removeName(name)"/>

And in your js you apply the logic that you want.

在你的js中你应用你想要的逻辑。

In angular is very similar. ng-click is equivalent to onclick. In your html code you have the directive ng-click and in your controller you apply the logic. I don´t understand why in angular you want to mix it.

在角度非常相似。 ng-click相当于onclick。在您的html代码中,您有指令ng-click,并在控制器中应用逻辑。我不明白为什么你想要混合它。

In brief, you needn't do it, you mustn't do it.

简而言之,你不需要这样做,你不能这样做。

#1