Angular Direktive ng-click Funktioniert Nicht

Plunker

Ich habe einen externen controller, enthält eine Richtlinie in seinem Blick. Die Richtlinie wird eine Liste von Punkten und erzeugt links, wo Sie wählen können jedes. Richtig setzt der HTML-Code in der link-Funktion, aber die links' ng-klicken Sie auf Aktionen nicht funktionieren.

Irgendwelche Ideen? 🙂

Code für die Nicht-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);
          }
        }
    }
  });
Versuchen, erstellen Sie eine Funktion zurückgibt, die der ng-klicken Sie auf Wert. Vielleicht hat es etwas zu tun mit javascript-closure (mennovanslooten.nl/blog/post/62)

InformationsquelleAutor jtfairbank | 2013-08-03

  1. 8

    Um ng-click Richtlinie funktioniert es verarbeitet werden muss('kompiliert') durch Winkel-Infrastruktur, die erste, also statt der manuellen Erstellung li Elemente in Ihrer Richtlinie über die Winkel hat keine Ahnung, dass Sie existieren, können Sie ng-repeat Richtlinie Vorlage wie folgt (keine Notwendigkeit für das manuelle erstellen von DOM-Elementen):

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

    Geändert plunker: http://plnkr.co/edit/SW1Ph0nIjVYW3UzixtBx?p=preview

    Ich denke, es ist sehr elegante Lösung. Natürlich können Sie verschieben Vorlage auf ewige Datei und verweisen Sie über templateUrl.

    Alternativ könnte man $compile service-on-element, nachdem Sie Hinzugefügt li Elemente manuell aber es fühlt sich an wie ein hack.

    Es ist elegant, kurz und benötigt kein jQuery. +1
    Fantastisch, ich danke Ihnen so sehr. Ich war definitiv nicht die Dinge zu tun, die 'Winkel-Weg".

    InformationsquelleAutor Tadeusz Wójcik

  2. 2

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

    Bitte unten ändern Sie in der url-Richtlinie

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

    habe ich gespritzt $complie und fügte eine Zeile $compile($(Elements))(scope);

    Das funktioniert, aber war nicht so elegant wie die andere Antwort. +1

    InformationsquelleAutor JQuery Guru

Schreibe einen Kommentar