AngularJS - HMTL Element erstellen und in vorhandes DIV legen funktioniert nicht

[alphakanal]

Hi!

Ich erstelle in einer Directive ein <canvas> - Element und möchte das an ein vorhandenes <div id="canvas-container"> Element einzufügen.
Wenn ich es an den body hänge funktioniert es - aber an den div-container hängen funktioniert nicht...

            var canvas = createHiDPICanvas(250, 250, 2); // erstellt das Canvas Element
            // console.log("Canvas ist: " + canvas);

            angular.element(document.getElementsByTagName('body')).append(canvas); // funktioniert
            angular.element(document.getElementById('canvas-container')).append(canvas); // funktioniert nicht

Was läuft hier falsch?

Der Div Container befindet sich in einer separaten Directive-Template HTML Datei und wird mit <ew:label></ew:label> in die View eingebunden.

Liegt es evtl. daran -> muss ich hier anders darauf zugreifen?

 

[tsseh]

Der Div Container befindet sich in einer separaten Directive-Template HTML Datei und wird mit <ew:label></ew:label> in die View eingebunden.

Liegt es evtl. daran

vermutlich

muss ich hier anders darauf zugreifen?

nein, allerdings würde ich angular.element('#canvas-container').append(canvas); schreiben
und vermutlich wäre es besser, das canvas gleich durch die directive erstellen zu lassen

 

[alphakanal]

und vermutlich wäre es besser, das canvas gleich durch die directive erstellen zu lassen

Das hab ich auch gedacht und macht das jetzt auch. Eigentlich wurde das <canvas-element> abhängig von der Auflösung mit einer bestimmten Größe erstellt - darauf kann ich aber verzichten.

Jedoch krieg ich trotzdem irgendwie keinen richtigen Zugriff auf das Canvas-Element:

        var canvas;
        canvas = document.getElementById('my-canvas'); [COLOR="#008000"]// Kein Crash aber nichts passiert[/COLOR]
        canvas = angular.element('#my-canvas'); [COLOR="#FF0000"]// Crash der Seite[/COLOR]
        var stage = new createjs.Stage(canvas); // EaselJS
        stage.density = 1;

        var testCircle = new createjs.Shape();
        testCircle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
        testCircle.x = 50;
        testCircle.y = 50;
        stage.addChild(testCircle);
        stage.update();

Da wird aber kein Kreis im Canvas gezeichnet wie es sollte.

- - - Aktualisiert - - -

Oder meinst Du mit 'in der Directive erstellen' auf diese Weise:

return {
            restrict: 'AE',
            template: '<canvas id="my-canvas" width="500" height="500" style="width: 250px; height: 250px; border: 1px solid darkred"></canvas>'
            templateUrl: 'assets/templates/directives/label.html' [COLOR="#008000"]// aktuell[/COLOR]

        };

Weil aktuell ist dieses Canvas-Element Teil der Template HTML - was nicht unbedingt erforderlich ist

- - - Aktualisiert - - -

Update
YEAH! Habe jetzt einmal Zugriff auf das Canvas-Element und kann damit arbeiten mit

            var canvas;
            canvas = angular.element(document.getElementById('my-canvas'));
            var stage = new createjs.Stage([COLOR="#FF0000"]canvas[0][/COLOR]);

In der Drirective wird es leer und siehts so aus

return {
            restrict: 'AE',
            template: '<canvas id="my-canvas" width="500" height="500" style="width: 250px; height: 250px; border: 1px solid darkred"></canvas>'

        };

Farbe ändern und interative Schreiben im Canvas wird dann in einem separaten Service gemacht

 

[rckd]

Ich weiß ja nicht was genau du vor hast, aber ich würde das vermutlich, wenn ich den direkten Zugriff auf das Canvas-Element bräuchte, in etwa so machen: Angular Canvas. getElementById sollte man innerhalb von Komponenten grundsätzlich vermeiden, denn so arbeitet man gegen die Wiederverwendbarkeit.

 

[alphakanal]

Danke ist vermerkt