AngularJS：ng-click不起作用答案

【问题标题】：AngularJS : ng-click not workingAngularJS：ng-click不起作用
【发布时间】：2021-03-27 20:49:37
【问题描述】：

我是 AngularJs 的新手，ng-click 没有按预期工作。我在互联网上搜索，按照教程，（这工作） - 但这不起作用！！！

我的代码：

<div class="row" ng:repeat="follower in myform.all_followers | partition:2">
    <ons-col class="views-row" size="50" ng-repeat="data in follower" >
        <img ng-src="http://dealsscanner.com/obaidtnc/plugmug/uploads/{{data.token}}/thumbnail/{{data.Path}}" alt="{{data.fname}}" ng-click="showDetail2(data.token)"/>
        <h3 class="title" ng-click="showDetail2('ss')">{{data.fname}}</h3>
    </ons-col>
</div>

这是我的控制器

//Follows Controller
app.controller('FollowsController', function($scope, $http) {
    var ukey = window.localStorage.ukey;

    $scope.myform ={};
    $scope.myform.reports ="";
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
    var dataObject = "usertoken="+ukey;
    var responsePromise = $http.post(server_url+"follows/", dataObject,{});
    responsePromise.success(function(dataFromServer, status,    headers, config) {
        $scope.myform.all_followers = dataFromServer;
        console.log(dataFromServer);

        //alert(dataFromServer);
        $scope.showDetail = function(index) {
            profileusertoken =  index;
            $scope.ons.navigator.pushPage('profile.html'); 
        }

        function showDetail2(index) {
            alert("here");
        }

        $scope.showDetail2 = showDetail2;
    });
});

无论是 showDetail 工作还是 showDetail2 请帮忙谢谢

【问题讨论】：

定义“不工作”。
您将控制器绑定到哪个元素？不要忘记ng-repeat 创建自己的范围。
检查ons-col 指令是否没有创建自己的隔离范围。如果是这种情况，showDetail2 函数将不可用。（快速测试，在<div>上设置ng-click，看看是否有效）

标签： javascript angularjs angularjs-ng-click

【解决方案1】：

只需将函数引用添加到控制器中的 $scope 即可：

例如，如果您希望函数 MyFunction 在 ng-click 中工作，只需添加到控制器：

app.controller("MyController", ["$scope", function($scope) {
   $scope.MyFunction = MyFunction;
}]);

【讨论】：

【解决方案2】：

这只是发生在我身上。我通过从 ng-click 编码点向后追溯解决了这个问题。发现多了一个

</div>

被放置在 html 中以提前关闭包含 ng-click 的 div 块。

去掉多余的

</div>

然后一切正常。

【讨论】：

【解决方案3】：

看看这个plunker

HTML：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.3.0-beta.16" data-semver="1.3.0-beta.16" src="https://code.angularjs.org/1.3.0-beta.16/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="FollowsController">
    <div class="row" ng:repeat="follower in myform.all_followers">
      <ons-col class="views-row" size="50" ng-repeat="data in follower">
        <img ng-src="http://dealsscanner.com/obaidtnc/plugmug/uploads/{{data.token}}/thumbnail/{{data.Path}}" alt="{{data.fname}}" ng-click="showDetail2(data.token)" />
        <h3 class="title" ng-click="showDetail2('ss')">{{data.fname}}</h3>
      </ons-col>
    </div>
  </body>

</html>

Javascript：

var app = angular.module('app', []);
//Follows Controller
app.controller('FollowsController', function($scope, $http) {
    var ukey = window.localStorage.ukey;
    //alert(dataFromServer);
    $scope.showDetail = function(index) {
        profileusertoken =  index;
        $scope.ons.navigator.pushPage('profile.html'); 
    }

    function showDetail2(index) {
        alert("here");
    }

    $scope.showDetail2 = showDetail2;
    $scope.myform ={};
    $scope.myform.reports ="";
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
    var dataObject = "usertoken="+ukey;
    //var responsePromise = $http.post("follows/", dataObject,{});
    //responsePromise.success(function(dataFromServer, status,    headers, config) {

    $scope.myform.all_followers = [[{fname: "blah"}, {fname: "blah"}, {fname: "blah"}, {fname: "blah"}]];
});

【讨论】：

我使用的是 ng-controller="MyController as ctrl"... 然后是 ctrl.doSomething()。正如您所做的那样，删除 ctrl 的东西并直接使用该方法是有效的。谢谢。
@Vaibhav 您使用的格式仅在您将方法分配给函数的this 对象而不是直接分配给$scope 时才有效。

【解决方案4】：

为使 ng-click 正常工作，您需要在 angularjs 脚本绑定后定义控制器并通过 $scope 使用它。

【讨论】：

【解决方案5】：

我尝试对两个同名的元素使用相同的 ng-click showDetail2('abc')

它对我有用。你能检查一下其余的代码，这些代码可能会让你走得更远。

here is the sample jsfiddle i tried:

【讨论】：

【解决方案6】：

由于*ngIf，我的实际组件不可见，我正在单击另一个组件并期望单击工作。如果您复制/粘贴代码或长时间处理现有代码，就会发生这种情况。

【讨论】：