Verbindliche click-Ereignis auf das Kind-element im-Richtlinie von AngularJS

Habe ich folgende Richtlinie.

(function () {
    'use strict';
    angular.module('ap.App')
        .directive('clearCancelFinishButtonsHtml', function () {
            return {
                scope: {
                    clearFunction: '='
                },
                replace: true,
                templateUrl: 'directives/clearCancelFinishButtons.html',
                link: function (scope, el, attrs) {
                    var clear= angular.element(el.find('button.clear'));
                    console.log(el.find('.clear'));
                    clear.bind("click", function () {
                        alert("here");
                    });
                }
            }
        });
})();

und es verweist auf die html-Datei wie folgt

<div class="row pull-right">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <button type="button" class="custom-default clear">CLEAR</button>
        <button type="button" class="custom-danger">CANCEL</button>
        <button type="button" class="custom-info" ng-click="ap.save()">FINISH</button>
    </div>
</div>

Was ich wollte, zu tun ist, greifen die Schaltfläche mit clear Klasse innerhalb der Richtlinie und geben Sie eine click-Ereignis zu. Aus irgendeinem Grund click-Ereignis an element selbst scheint zu arbeiten, aber ich konnte nicht das halten der Kind-element zu binden. Jede Hilfe wird sehr geschätzt.

PS.
Ich bin mit der Richtlinie
<clear-cancel-finish-buttons-html id="{{$id}}" clear-function="'resetConfigurationPageInputs'">
</clear-cancel-finish-buttons-html>

UPDATE----------

Wollte ich so sein wie ich will in der Lage sein, um dynamisch hinzufügen und entfernen-Funktion aus der Richtlinie Erklärung selbst.

InformationsquelleAutor Dinesh Devkota | 2016-05-06

  1. 1

    Danke an alle, die versuchen,

    Ich es geschafft habe mit dem folgenden code.

    (function () {
    'use strict';
    angular.module('ap.App')
        .directive('clearCancelFinishButtonsHtml', function () {
            return {
                scope: {
                    clearFunction: '='
                },
                replace: true,
                templateUrl: 'directives/clearCancelFinishButtons.html',
                link: function (scope, el, attrs) {
                    var buttons=el.find('button');
                    angular.forEach(buttons, function(button){
                        var buttonEl=angular.element(button);
                        if(buttonEl.hasClass("clear")){
                            buttonEl.bind("click", function () {
                              alert("here");
                          });
                        }
                    })

                }
            }
        });
})();

    Happy coding 😉

    bind() ist veraltet, on() sollte stattdessen verwendet werden. Siehe Dokumentation.

    InformationsquelleAutor Dinesh Devkota

  2. 0

    warum bist du nicht mit ng-click?

    wenn Sie dies tun

    link: function (scope, el, attrs) {
  scope.clearClick = function () { alert('click') };
}

    und 

    <button type="button" class="custom-default clear" ng-click="clearClick()">CLEAR</button>

    dann ruft es die Funktion

    Ich möchte in der Lage sein, um dynamisch hinzufügen und entfernen-Funktion aus der Richtlinie Erklärung selbst.

    InformationsquelleAutor damien

  3. 0

    benutzt du jquery? weil wenn nicht, dann .find() Methode funktioniert nur mit einem tag-Namen (also class-Selektoren wird nicht funktionieren). Also das problem hier ist, dass el.find('.clear') ist nicht immer Ihr Kind-element. Verwenden Sie stattdessen document.querySelector wie diese:

    var clear= angular.element(el[0].querySelector('button.clear'));

    Wenn Sie nicht wie jquery in deinem Projekt, dann haben Sie nur Zugriff auf jqlite. Sie können sehen, was kann und kann nicht mit erfolgen in der jqlite docs.

    Gut, dass wählt die ' - Taste.klar, " der ganzen Seite, ich will nur wählen Sie das Kind von der spezifischen Richtlinie.
    aktualisiert meine Antwort, ersetzen document mit el[0]
    Apararently konnte nicht binden Funktion element ausgewählt so. Danke für die Hilfe, Mann!
    Ahh ok, my bad, wusste nicht, Sie waren mit den bind() Methode, es hat zu tun mit der on() - Methode statt.

    InformationsquelleAutor Ahmed Wagdi

Schreibe einen Kommentar