AngularJS:ng-click无效

Question

AngularJS:ng-click无效

Sye*_*qvi 36 javascript angularjs angularjs-ng-click

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

Run Code Online (Sandbox Code Playgroud)

这是我的控制器

//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;
    });
});

Run Code Online (Sandbox Code Playgroud)

Niether showDetail工作或showDetail2请帮助谢谢

Answer 1

小智 9

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

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Waw*_*awy 5

看看这个笨蛋

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>

Run Code Online (Sandbox Code Playgroud)

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"}]];
});

Run Code Online (Sandbox Code Playgroud)

@Vaibhav 只有当您将方法分配给函数的“this”对象而不是直接分配给“$scope”时，您使用的格式才会起作用。 (3认同)

Answer 3

Dan*_*eng 5

它发生在我身上.我通过从ng-click编码点向后追踪来解决问题.发现了一个额外的

</div>

Run Code Online (Sandbox Code Playgroud)

被放置在html中以过早关闭包含ng-click的div块.

删除了额外的

</div>

Run Code Online (Sandbox Code Playgroud)

然后一切都很好.

归档时间：	11 年，8 月前
查看次数：	125417 次
最近记录：	8 年，7 月前