Binden von Ereignissen auf AngularJS-element-Richtlinien mithilfe von jQuery

Habe ich eine Direktive in AngularJS:

module = angular.module("demoApp", [], null);
module.directive('sample', function () {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        template: "<div ng-transclude></div>",
        controller: function ($scope, $element) {
            this.act = function (something) {
                //problematic line HERE
                $element.trigger("myEvent.sample", [something]);
            };
        }
    };
})
.directive('item', function () {
    return {
        restrict: "E",
        require: "^sample",
        transclude: true,
        replace: true,
        template: "<a ng-transclude style='display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;'></a>",
        link: function (scope, element, attributes, parentController) {
            element.on("click", function () {
                parentController.act(this.innerText);
            });
        }
    }
});

Und in meine HTML ich benutze es so:

<sample id="myElement">
    <item>1</item>
    <item>2</item>
</sample>

Welche dargestellt werden als:

<div ng-transclude="" id="myElement">
    <a ng-transclude="" style="display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;;display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;" class="ng-scope"><span class="ng-scope">1</span></a>
    <a ng-transclude="" style="display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;;display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;" class="ng-scope"><span class="ng-scope">2</span></a>
</div>

Will ich hören können Ereignisse ausgelöst werden, manuell durch jQuery:

$("#myElement").on("myEvent.sample", function (e, something) {
    alert("click: " + something);
});

Möchte ich dieses Ereignis ausgelöst werden, wenn der link geklickt wird.

Wenn ich die replace Eigenschaft false auf die sample Richtlinie, es funktioniert. Ich denke, es ist weil an der Stelle, wo das Ereignis ausgelöst wird, das element sample existiert nicht mehr, und als solches wird es ersetzt worden durch die inneren Vorlage.

So, wie kann ich dies erreichen?

Tun dies, wie bereits in der Antwort unten nicht erreichen, mein Ziel:

$($element).trigger("myEvent.sample", [something]);

link: function($scope, $element){ $element.klicken Sie auf(Funktion(){alert('clicked'):});}

InformationsquelleAutor Milad Naseri | 2014-02-21

16

Unten finden Sie die Geige

fiddle

Trigger ist eine jquery-Funktion, die auf die richtige handler.
```
$(element).trigger("myEvent.sample");
```
Hoffe, das hilft
- Ich danke Ihnen sehr für Ihre Bemühungen. Für das, erhalten Sie das akzeptieren. Das eigentliche problem wurde in der version von jQuery, die ich Sprach. Ich war auf 2.x. Sehen Sie Ihre Geige lotste mich in die richtige Richtung.
- Ich bin mir nicht sicher, wenn ich das schon lese Sie Recht. Ich habe aktualisiert mein fiddle mit Jquery 2.x und es funktioniert wie erwartet.Geige. Meinten Sie gab es keine andere Frage, da der Jquery-2.x ?
- Eigentlich ja. Ich war gerade dabei, über die AngularJS-Dokumentation und ausdrücklich gesagt, dass am 1.2.x noch keine Unterstützung für jQuery 2.x ist die Veranstaltung verbindlich.
InformationsquelleAutor Sai

Hier aktualisiert fiddle: http://jsfiddle.net/3u3zh/1/

Gibt es mehrere Punkte bemerkenswert:

Weil der Weg Winkel-Transformationen, DOM, ich würde Ratschläge anbringen alle Ihre benutzerdefinierten Listenern, die auf Körper und dann die filter durch Ereignis-Ziel. $('body').on('myEvent.sample', 'target-selector-expr', handler) macht genau das. Zum Beispiel, wenn Sie Verwendung von benutzerdefinierten Ereignis-Listener auf ngRepeated-Elemente, Ihr Handler würde nicht ausgeführt werden, weil diese Elemente nicht existieren würde an der Zeit zu versuchen, die Ereignisse anfügen, um Sie.
Es scheint, dass die Winkel s jqLite Umsetzung ist etwas fehlt in Funktionen als auslösende Ereignisse. Deshalb wickelte ich sample's element in jQuery ( $($element) ), weil sonst die zusätzlichen Daten nicht bekommen würde, um die handler.

Endgültige Vorlage:

<div ng-app="myApp">
  <sample id="myElement"><item>1</item><item>2</item></sample>
</div>

Js:

var myApp=angular.module('myApp',[]);
myApp.directive('sample', function () {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        template: "<div ng-transclude></div>",
        controller: function ($scope, $element) {
            this.act = function (something) {
               $($element).trigger("myEvent.sample", [something]);
            };
        }
    };
})
.directive('item', function () {
    return {
        restrict: "E",
        require: "^sample",
        transclude: true,
        template: "<a ng-transclude></a>",
        link: function (scope, element, attributes, parentController) {
            element.on("click", function(e) {
                parentController.act(this.innerHTML);
            });
        }
    }
})

$(document).ready(function(){
    $("body").on("myEvent.sample", '#myElement', function (e, something) {
        alert('clicked: ' + something);
    });
});

InformationsquelleAutor package

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.