Angulaire de la Directive ng-click ne fonctionne Pas

Plunker

J'ai un contrôleur externe qui contient une directive à l'intérieur de son point de vue. La directive permet d'obtenir une liste de points du processus et génère des liens où vous pouvez sélectionner chacun. Il définit correctement le code HTML dans la fonction de lien, mais le lien " ng-cliquez sur actions ne fonctionnent pas.

Des idées? 🙂

Code de la Non-Plunkering

HTML

<!DOCTYPE html>
<html>

  <head><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="widget">
      <process stages="production" at="productionAt"></process>
    </div>
  </body>

</html>

JS

angular.module('app', ['app.directives', 'app.controllers']);
angular.module('app.controllers', [])
.controller('widget', function($scope) {
var selectStage = function () {
alert(this.label + " selected.");
$scope.processAt = this;
}
$scope.production = [
{label: "Starting", select: selectStage}
, {label: "Fermenting", select: selectStage}
, {label: "Pouring",     select: selectStage}
, {label: "Beer!",  select: selectStage}
];
$scope.productionAt = $scope.production[0];
});
angular.module('app.directives', [])
.directive('process', function() {
return {
restrict: 'E'
, replace: true
, template: '<ol class="nav nav-pills"></ol>'
, scope: {
stages: "="
, at: "="
}
, link: function postLink(scope, element, attrs) {
for (var i = 0; i < scope.stages.length; i++) {
var $stage = $('<li ng-click="stages['+i+'].select()"><a>'+scope.stages[i].label+'</a></li>');
if (scope.at == scope.stages[i]) {
$stage.addClass('active');
}
$(element).append($stage);
}
}
}
});
Essayez de créer une fonction qui retourne la ng-cliquez sur la valeur. Peut-être qu'il a quelque chose à voir avec le javascript de fermeture (mennovanslooten.nl/blog/post/62)

OriginalL'auteur jtfairbank | 2013-08-03

  1. 8

    Afin de rendre ng-click directive de travail, il doit être traité('compilé') par angulaire de l'infrastructure d'abord, donc, plutôt que de créer manuellement li éléments dans votre directive sur angulaire n'ont pas la moindre idée qu'ils existent, vous pouvez utiliser ng-repeat dans la directive modèle comme suit (pas besoin de créer manuellement des éléments du DOM):

    angular.module('app.directives', [])
.directive('process', function() {
return {
restrict: 'E'
, replace: true
, template: '<ol class="nav nav-pills"><li ng-class="{active: stage==at}" ng-click="stage.select()" ng-repeat="stage in stages"><a>{{stage.label}}</a></li></ol>'
, scope: {
stages: "="
, at: "="
}
}
});

    Modifié plunker: http://plnkr.co/edit/SW1Ph0nIjVYW3UzixtBx?p=preview

    Je pense que c'est plus élégant. Bien sûr, vous pouvez déplacer le modèle éternelle fichier et de le référencer via templateUrl.

    Vous pouvez également utiliser $compile service sur l'élément de fois que vous avez ajouté li éléments manuellement, mais il se sent comme un hack.

    Il est élégant, à court et ne nécessite pas de jQuery. +1
    Fantastique, merci beaucoup. Je n'étais certainement pas faire les choses à la "angulaire".

    OriginalL'auteur Tadeusz Wójcik

  2. 2

    De travail url http://plnkr.co/edit/3zuDuQDjhA5UY5nLD09Z?p=preview

    Veuillez faire en dessous de changement de l'url de la directive

    angular.module('app.directives', [])
.directive('process', function($compile) {
return {
restrict: 'E'
, replace: true
, template: '<ol class="nav nav-pills"></ol>'
, scope: {
stages: "="
, at: "="
}
, link: function postLink(scope, element, attrs) {
for (var i = 0; i < scope.stages.length; i++) {
var $stage = $('<li ng-click="stages['+i+'].select()"><a>'+scope.stages[i].label+'</a></li>');
if (scope.at == scope.stages[i]) {
$stage.addClass('active');
}
$(element).append($stage);
$compile($(element))(scope);
}
}
}
});

    j'ai injecté $complie et ajouté une ligne $compiler($(element))(champ d'application);

    Ce qui fonctionne, mais n'était pas aussi élégant que les autres répondre. +1

    OriginalL'auteur JQuery Guru