Javascript Girl
  1. Javascript Girl
  3. AngularJS: ng-click ne fonctionne pas
Intereting Posts
OffsetParent () dans jQuery ne retourne pas l'ancêtre positif relatif Cochez toutes les cases à cocher vuejs Sauvegarder la valeur de la variable et la récupérer après la mise à jour de la page Backbone.View: delegateEvents ne relie pas les événements à la sous-vue Ce que signifie ce point d'interrogation dans Flow: "? () => Void" Le cookie est supprimé lorsque le navigateur est fermé Comment énumérer les dates entre deux dates en moment Obtenez l'année en cours en JavaScript Comment gérer oncut, oncopy et onpaste dans jQuery? JQuery définit plusieurs options déroulantes sur sélectionné Firebase – définissez la priorité lors de la mise à jour / fanout sur plusieurs nœuds Générateur de mot de passe jQuery Hauteur des divisions de contenu variable en utilisant css avec l'en-tête fixe et le pied de page Pourquoi est-il possible d'interroger jQuery ('div') comme un tableau? Comment puis-je générer une liste de balises HTML distinctes dans une page à l'aide de JavaScript (doit fonctionner dans IE6)

AngularJS: ng-click ne fonctionne pas

Je suis nouveau dans AngularJs, ng-click ne fonctionne pas comme prévu. J'ai cherché sur Internet, Suivez le didacticiel, (ce qui fonctionnait) – mais cela ne fonctionne pas !!!

Mon code: 

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

Voici mon contrôleur 

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

Niether showDetail working without showDetail2 S'il vous plaît aidez Merci

Jetez un oeil à ce plunker

HTML: 

 <!DOCTYPE html> <html ng-app="app"> <head> <script data-require="[email protected]" 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"}]]; //console.log(dataFromServer); //}); });

Ajoutez simplement la référence de fonction à la portée $ dans le contrôleur:

Par exemple, si vous voulez que la fonction MyFunction fonctionne dans ng-click, ajoutez simplement au contrôleur: 

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

Pour que ng-click fonctionne correctement, vous devez définir votre contrôleur après la liaison du script angularjs et l'utiliser via $ scope.

J'ai essayé d'utiliser le même ng-click pour deux éléments avec le même nom showDetail2('abc')

Ça marche pour moi . Pouvez-vous vérifier le reste du code qui peut vous faire perdre pour aller plus loin.

Voici l'exemple jsfiddle que j'ai essayé:

Ça vient juste à moi. J'ai résolu le problème en recourant vers l'arrière à partir du point ng-click est codé. Trouvé un extra 

 </div>

A été placé dans le html pour fermer prématurément le bloc div qui contient le ng-clic.

Supprimé le supplément 

 </div>

Alors tout fonctionne bien.