IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

ng-click ne semble pas fonctionner


Sujet :

AngularJS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2011
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2011
    Messages : 90
    Par défaut ng-click ne semble pas fonctionner
    Bonjour à tous,

    Je suis débutant avec angularJS et j'ai un problème quant à l'appel de la fonction setSkill

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    var app = angular.module('DisplayRequest', ['ngCookies']);
    app.controller('ControllerDisplayRequest', function($scope, $http, $window, $cookies){
     
      var ApiKey = $cookies.get('api_key');
      $scope.Error1 = false;
      $scope.Error2 = false;
     
      $scope.setSkill = function (skill) {
        $scope.chosenSkill = skill;
        console.log($scope.chosenSkill);
      };
     
      $http(
        {method: 'GET',
        url: 'http://umannity.com:1337/user',
        headers: {'Authorization': ApiKey }
      }).success(function (data){
        $scope.skills = data.skills;
     
        var parsedSkills = JSON.parse("[\"informatique\",\"enseignement\"]"); //JSON.parse("[\"informatique\",\"enseignement\"]");
        var i = 0;
        var TitleCategories = "";
        while (parsedSkills.length != i) {
          TitleCategories += "<li> <a ng-click='setSkill(\""+ parsedSkills[i] +"\")' class='n b margin' href='#bySkill' data-toggle='tab'> "+ parsedSkills[i] +"</a></li>";
          i++;
        }
        document.getElementById("TitleTabs").innerHTML += TitleCategories;
     
        $http(
          {method: 'GET',
          url: 'http://umannity.com:1337/request',
          headers: {'Authorization': ApiKey }
        }).success(function (data){
          $scope.allhelpdata = data;
        }).error(function (response){
          $scope.Error1 = true;
          console.log("error");
        });
     
     
        $http(
          {method: 'GET',
          url: 'http://umannity.com:1337/request',
          headers: {'Authorization': ApiKey },
          data :{
           "skills": $scope.skills
         } 
       }).success(function (data){
        $scope.skillshelpdata = data;
      }).error(function (response){
        $scope.Error2 = true;
        console.log("error");
      });
     
     
    }).error(function (data){
     console.log("Fail get skills");
    });
     
     
     
    $scope.search = function (item) {
      if ($scope.searchText == undefined)
        return true;
      else {
        if (item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1 ||
          item.skills.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1)
          return true;
      }
      return false;
    }
     
    });

    Au niveau du HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class="tab-pane panel-bord text-padding" id="bySkill">			
        <span id="error" ng-show="Error2">Impossible de charger les demandes d'aides.</span>
        <p ng-repeat="data2 in skillshelpdata | filter:search">
          2<a ng-href="Aide/{{data2.id}}">[Name:]{{data2.name}} [date:]{{data2.date}}		[skills:]{{data2.skills}}</a>
        </p>
    </div>
    Lorsque je clique sur le lien <a> rien n'apparâit dans le console.

  2. #2
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    Sans le code de la vue ça va être compliqué de te répondre.

    Sinon il est interdit de modifier le DOM dans un controller :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("TitleTabs").innerHTML += TitleCategories;
    Tu as les bindings ( {{ }} ) pour faire ça.

    La lecture du tutoriel de base me semble nécessaire.

  3. #3
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2011
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2011
    Messages : 90
    Par défaut
    Bonjour Marco, merci de ta réponse,

    Je viens de rajouter le code HTML, il s'agit d'un simple
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <ul id="TitleTabs" class="nav nav-tabs nav-justified" data-tabs="tabs">
        <li class="active"><a class="n b" href="#AllHelps" data-toggle="tab">Toutes les demandes</a></li>
    </ul>
    Ce bout de code est en réalité un menu dont la taille et le contenu changent suivant ce que renvoie l'API.
    Je ne vois vraiment pas comment mettre à jour le HTML sans le modifier via le controller.

  4. #4
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    Citation Envoyé par Maitre2B Voir le message
    Je ne vois vraiment pas comment mettre à jour le HTML sans le modifier via le controller.
    Fais le tutoriel sur le site d'angular. La question que tu poses est trop basique, je ne peux pas y répondre sans te porter préjudice.

  5. #5
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2011
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2011
    Messages : 90
    Par défaut
    Bonjour,

    J'ai avancé dans le code en mettant un ng-bind-html, mais le peu qui fonctionnait avant a disparu, et la fonction que je souhaite n'est toujours pas appelée lorsque je clique.
    Il y a aussi une suppression de certains éléments qui ne font :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $scope.TitleCategories += "<li> <a ng-click='setSkill(\""+ parsedSkills[i] +"\")' class='n b margin' href='#bySkill' data-toggle='tab'> "+ parsedSkills[i] +"</a> </li>";
    Lorsque je regarde le code source depuis le navigateur : <a class="n b margin" href="#bySkill"> informatique</a>
    le ng-click et data-toggle ont disparu.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    var app = angular.module('DisplayRequest', ['ngCookies', 'ngSanitize']);
    app.controller('ControllerDisplayRequest', function($scope, $http, $window, $cookies){
     
      var ApiKey = $cookies.get('api_key');
      $scope.Error1 = false;
      $scope.Error2 = false;
     
      $scope.setSkill = function (skill) {
        $scope.chosenSkill = skill;
        console.log($scope.chosenSkill);
      };
     
      $http(
        {method: 'GET',
        url: 'http://umannity.com:1337/user',
        headers: {'Authorization': ApiKey }
      }).success(function (data){
        $scope.skills = data.skills;
     
        var parsedSkills = JSON.parse("[\"informatique\",\"enseignement\"]"); //JSON.parse("[\"informatique\",\"enseignement\"]");
        var i = 0;
        $scope.TitleCategories = "";
        while (parsedSkills.length != i) {
          $scope.TitleCategories += "<li> <a ng-click='setSkill(\""+ parsedSkills[i] +"\")' class='n b margin' href='#bySkill' data-toggle='tab'> "+ parsedSkills[i] +"</a> </li>";
          i++;
        }
        //document.getElementById("TitleTabs").innerHTML += TitleCategories;
     
        $http(
          {method: 'GET',
          url: 'http://umannity.com:1337/request',
          headers: {'Authorization': ApiKey }
        }).success(function (data){
          $scope.allhelpdata = data;
        }).error(function (response){
          $scope.Error1 = true;
          console.log("error");
        });
     
     
        $http(
          {method: 'GET',
          url: 'http://umannity.com:1337/request',
          headers: {'Authorization': ApiKey },
          data :{
           "skills": $scope.skills
         } 
       }).success(function (data){
        $scope.skillshelpdata = data;
      }).error(function (response){
        $scope.Error2 = true;
        console.log("error");
      });
     
     
    }).error(function (data){
     console.log("Fail get skills");
    });
     
     
     
    $scope.search = function (item) {
      if ($scope.searchText == undefined)
        return true;
      else {
        if (item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1 ||
          item.skills.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1)
          return true;
      }
      return false;
    }
     
    });

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    <html ng-app="DisplayRequest">
        <head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<meta name="Content-Language" content="fr" />
    		<meta name="Description" content="" />
    		<meta name="Keywords" content="" />
    		<meta name="Subject" content="" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    		<link rel="stylesheet" href="css/profil2.css" />
    		<link rel="stylesheet" href="css/Profil_V3.css" />
            <title>Ummanity - Demandes d'aides</title>
        </head>
     
    	<body ng-controller="ControllerDisplayRequest">
    	<!--BARRE ORANGE-->
    		<div class="row">
    			<nav class="navbar navbar-default orange toolbar col-sm-11">
    				<div class="col-sm-1 menu pos">
    					<a href="acceuil.html"><img src="img/Logo_Umannity.png" alt="profil" class="png pos"></a>
    				</div>
    				<div class="centering">
    						<a  class="btn pull-right marg1" data-toggle="tooltip" data-placement="bottom" title="Personnes aidées" data-placement="bottom" data-toggle="modal">
    							<span class="badge bpos bg w gly"><span class="glyphicon glyphicon-user"></span></span>
    						</a>
    						<a  class="btn pull-right marg" data-toggle="tooltip" data-placement="bottom" title="Aides apportées" data-placement="bottom" data-toggle="modal">
    							<span class="badge bpos bg w gly"><span class="glyphicon glyphicon-ok"></span></span>
    						</a>
    						<a  class="btn pull-right marg" data-toggle="tooltip" data-placement="bottom" title="Points" data-placement="bottom" data-toggle="modal">
    							<span class="badge bpos bg w gly"><span class="glyphicon glyphicon-asterisk"></span>{{points}}</span>
    						</a>
    						<a  class="btn pull-right marg" href="liste.html" data-toggle="tooltip" data-placement="bottom" title="Demandes en cours" data-placement="bottom" data-toggle="modal">
    							<span class="badge bpos bg w gly"><span class="glyphicon glyphicon-envelope"></span>3</span>
    						</a>
    				</div>
    			</nav>	
    		</div>
    	<!--FIN BARRE ORANGE-->	
    	<!--SIDEBAR MENU-->
    		<div class="row">
    			<div class="menu col-sm-1">
    				<div class="panel-group" id="accordion">
    					<div class="panel panel-default top">
    						<div class="panel-heading">
    							<h4 class="panel-title hbutton">
    								<a class="n" href="Profil_V3.html"><span class="glyphicon glyphicon-user pad">
    								</span>Profil</a>
    							</h4>
    						</div>	
     
    					</div>
    					<div class="panel panel-default blue">
    						<div class="panel-heading top2">
     
    							<h4 class="panel-title hbutton">
    								<a class="n" href="liste.html"><span class="glyphicon glyphicon-question-sign pad">
    								</span>Demandes</a>
    							</h4>
    						</div>
     
    					</div>
    					<div class="panel panel-default blue">
    						<div class="panel-heading top2">
    							<h4 class="panel-title hbutton">
    								<a class="n"><span class="glyphicon glyphicon-star-empty pad">
    								</span>Contact</a>
    							</h4>
    						</div>
    					</div>
    					<div class="panel panel-default blue">
    						<div class="panel-heading top2" >
    							<h4 class="panel-title hbutton" >
    								<a class="n" href="#"><span class="glyphicon glyphicon-off pad">
    								</span>Déconnexion</a>
    							</h4>
    						</div>
    					</div>
    					<div class="well bg size"></div>
    				</div>
    			</div>
    	<!--FIN SIDEBAR MENU-->
    	<!--PROFIL-->
    			<div class="well w col-sm-9">
    					<div class="row">
     
    					<div class="well col-sm-12">
    						<ul id="TitleTabs" class="nav nav-tabs nav-justified" data-tabs="tabs">
    							<li class="active"><a class="n b" href="#AllHelps" data-toggle="tab">Toutes les demandes</a></li>
    							<span ng-bind-html="TitleCategories"> </span>
    						</ul>
    						<input type="text" id="searchText" ng-model="searchText" placeholder="Recherche">
    						<div id="my-tab-content" class="tab-content">
    							<div class="tab-pane active panel-bord text-padding" id="AllHelps">
    								<span id="error" ng-show="Error1">Impossible de charger les demandes d'aides.</span>
    								<p ng-repeat="data1 in allhelpdata | filter:search">
    									1[name:]{{data1.name}}	[date:]{{data1.date}}  		[description:]{{data1.description}} 		 		[skills:]{{data1.skills}}
    								</p>
    							</div>
    							<div class="tab-pane panel-bord text-padding" id="bySkill">			
    								<span id="error" ng-show="Error2">Impossible de charger les demandes d'aides.</span>
    								<p ng-repeat="data2 in skillshelpdata | filter:search">
    									2<a ng-href="Aide/{{data2.id}}">[Name:]{{data2.name}} [date:]{{data2.date}}		[skills:]{{data2.skills}}</a>
    								</p>
    							</div>
    						</div>
    					</div>
    				</div>					
    			</div>
    		</div>	
     
    		<!--div class="row">
    			<div class="menu">
    				<div class="well bg top size"></div>
    			</div>
    		</div-->
    </body>
     
     
    	<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    	<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.min.js"></script>
    	<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.js"></script>
    	<script src="controller/ControllerDisplayRequest.js"></script>
    </html>

  6. #6
    Invité
    Invité(e)
    Par défaut
    Tu fais une boucle while dans ton controleur sur ton Json parsedSkills, alors qu'il faudrait peut être faire un autre ng-repeat de $scope.parsedSkills dans ta vue HTML, selon moi.

    Il faudrait filtrer ton JSON qui s'appelle parsedSkills à l'aide d'un filtre angularJs 1.x.

    A noter qu'il est possible d'imbriquer les ng-repeat.

    Pour ma part, je n'ai jamais vu pareille syntaxe jusqu'à présent dans un controleur AngularJs 1.x, mais en effet, ça peut peut être marcher:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     $scope.TitleCategories += "<li> <a ng-click='setSkill(\""+ parsedSkills[i] +"\")' class='n b margin' href='#bySkill' data-toggle='tab'> "+ parsedSkills[i] +"</a> </li>";

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. setFont ne semble pas fonctionner
    Par Nico57 dans le forum AWT/Swing
    Réponses: 8
    Dernier message: 25/07/2007, 14h37
  2. [DOM] Script qui ne semble pas fonctionner sous IE 6 et 7
    Par Oluha dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 12/06/2007, 16h50
  3. Réponses: 1
    Dernier message: 28/03/2007, 17h09
  4. [PDO] et bindValue qui ne semble pas fonctionner
    Par Tommyl dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 31/10/2006, 16h12
  5. Ma table temporaire ne semble pas fonctionner.
    Par outshined dans le forum Requêtes
    Réponses: 2
    Dernier message: 12/09/2006, 14h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo