Anfängerfragen mit AngularJS und Direktiven - Einpacken einer jQuery-Komponente

Question

Zuerst sollte ich erwähnen, dass ich gerade an der Umstellung auf clientseitige Programmierung arbeite. Ich bin sehr neu in js. Meine vorherige Erfahrung ist in erster Linie in C und einigen Assembly. Ich habe auch ein paar sehr einfache php Jahre gemacht, als es noch 4.0 war. Also, kurz gesagt, neu zu Javascript, aber meinen Kopf ein bisschen herum.

Ich habe ziemlich viel gesucht und lauerte aber konnte meine Probleme nicht beheben.

Ich erkläre einige Grundlagen von AngularJS und es ist ziemlich nett, aber ich habe Schwierigkeiten, meinen Kopf darüber zu wickeln, wie Anweisungen funktionieren und wie man auf Daten von benutzerdefinierten Steuerelementen zugreifen kann.

Lange Geschichte kurz Ich versuche, ein benutzerdefiniertes Steuerelement für Bootstrap-Arbeit mit angularjs zu machen, damit ich es richtig in Formularen verwenden kann. Hier

ist die Steuerung: http://tarruda.github.com/bootstrap-datetimepicker/

Ich habe einige andere Steuerelemente, die ich will Arbeit machen, aber Ich glaube, wenn ich diese bekommen werde ich wahrscheinlich leicht genug, um die anderen. Hier

ist ein Link zu einem Grundgerüst, was ich an diesem Punkt haben: http://jsfiddle.net/uwC9k/6/

Zunächst einmal, ich versuche, meinen Kopf herum zu wickeln, wie die Steuerung zu initialisieren, sobald ich die Vorlage haben arbeiten (die, wie ich ziemlich viel zu diesem Zeitpunkt denke ich)

Wenn ich das in die Link-Anweisung setzen, tut es nichts. Ich sehe keine Fehler. scope.dpid zeigt in der Tat die ID des Controls, also dachte ich, es würde funktionieren. Aber ach, mein einfaches Verständnis von Javascript sagt mir, dass ich außerhalb des Rahmens bin oder irgendeinen solchen Unsinn, wo ich nicht auf das Element zugreifen kann.

Sobald ich das bekomme, bin ich nicht genau sicher, wie man diese Daten auch in Formularen zugänglich macht.

Jede Hilfe wird sehr geschätzt.

Update Habe das grundlegende Bit arbeiten, jetzt muss ich wissen, wie man die Daten von der neuen Steuerung in meinen Controller bekommt. Hier ist ein Link zu der neuen jsfiddle aktualisiert. http://jsfiddle.net/tmZDY/1/

Update 2 Ich glaube, ich habe eine Idee, wie diese Daten zugänglich zu machen, aber mein fehlendes Wissen, Javascript, hat mich wieder trocken gelassen.

Wenn ich das Objekt erstellen, mache ich es so.

var elDatepicker = element.datetimepicker({ 
language : 'en', 
pick12HourFormat : true, 
}); 

Allerdings, wenn ich versuche, dieses Objekt zu verwenden, es scheint nicht die richtigen zu bekommen, oder ich bin nur ein Grundwissen fehle. So oder so, das macht mich töricht.

Dies schlägt fehl, getDate ist in der Tat eine Methode, zumindest sieht es so aus, als wäre es im Code des Plugins.

Answer 1

Anstelle eines isolierten Bereichs können Sie find() die erste div Ihrer Vorlage und wenden Sie dann datetimepicker() an.So brauchen Sie keine id in Ihrem HTML:

<datepicker model="mydate"></datepicker> 
mydate = {{mydate}} 

Ich schlage vor, auch replace: true:

.directive('datepicker', function ($parse) { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<div class=\"well\"><div class=\"input-append\">' 
     + '<input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input>' 
     + '<span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\"></i></span>' 
     + '</div></div>', 
     link: function (scope, element, attr) { 
      var picker = element.find('div').datetimepicker({ 
       language: 'en', 
       pick12HourFormat: true 
      }); 
      var model = $parse(attrs.model); 
      picker.on('changeDate', function(e) { 
       console.log(e.date.toString()); 
       console.log(e.localDate.toString()); 
       model.assign(scope, e.date.toString()); 
       scope.$apply(); 
      }); 
     } 
    }; 
}) 

Fiddle

$parse ist ein bisschen schwierig. Was ich zeige, ist der Hauptanwendungsfall dafür: Wir analysieren ein Attribut und erhalten eine Funktion zurück, die eine assign()-Methode enthält, die es uns ermöglicht, die Bereichseigenschaft zu ändern.

Answer 2

Eine der Möglichkeiten zu tun ist, wie in dieser Geige gezeigt. http://jsfiddle.net/uwC9k/10/

Da das datepicker Element durch die Vorlagenzeichenfolge ersetzt werden muss, ist dies ein guter Anwendungsfall, um die Kompilierfunktion zu verwenden. Also innerhalb der Kompilierfunktion das datepicker Element durch die Vorlagenzeichenfolge ersetzen.

Sobald die Kompilierung abgeschlossen ist, werden wir zur Link-Funktion gehen, die nichts anderes ist als die Funktion, die innerhalb der Kompilierfunktion zurückgegeben wird. Was die Verknüpfungsfunktion tut, ist dieses <div class=\"input-append\"> Element mit Datumsauswahl Funktionalität initialisieren mit

element.datetimepicker({ 
         language: 'en', 
         pick12HourFormat: true 
       }); 

Da Sie die jquery sind, einschließlich, ist das Element Attribut in der Verknüpfungsfunktion ein jquery warpped Element. So können Sie sofort die datetimepicker Methode aufrufen.

Answer 3

Sie können eine Klasse wie datetimepicker zum div hinzufügen, das in datetimepicker konvertiert werden muss, und dann diese Klasse verwenden, um nach dem Element zu suchen.

.directive('datepicker', function() { 
    return { 
     restrict: 'E', 
     template: '<div class=\"well\"><div id={{dpid}} class=\"input-append datetimepicker\"><input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input> <span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\">  </i> </span> </div></div>', 
     scope: { dpid: '@'}, 
     link: function(scope, element, attr) { 
      attr.$observe('dpid', function(value) { 
       if(value) { 
       $(element).find('.datetimepicker').datetimepicker({ 
        language: 'en', 
        pick12HourFormat: true 
      }); 
       } 
      }); 
     } 
    }; 
}) 

Demo: Fiddle