Ich arbeite an einem Spiel mit Angularjs. Ich habe ein Problem, das ich noch nicht lösen konnte. Ich möchte einen Popup-Dialog (keine Warnung) verwenden, dessen Inhalt vom Kontext abhängt. Dieses Popup enthält eine Schaltfläche, die beim Klicken das Spiel startet.

Da der Inhalt dynamisch ist, funktioniert die ng-click-Funktion nicht.

Ich habe es mit Direktiven und direkt vom Controller versucht, aber nicht zum Laufen gebracht.

Meine konkrete Frage ist, wie ich einen HTML-Button zu einem mit anglejs hinzufüge, der eine ng-click-Funktion enthält, die tatsächlich ausgelöst wird.

Bearbeiten: hier ein Versuch (der tatsächlich die Schaltfläche zum Anzeigen bringt, aber ng-click macht nichts): Controller:

    {
       if ($scope.quiz.state === 'finished' || $scope.quiz.state === 'initialized') {
           var startButton = '<br><br><button data-ng-click="startQuiz">start quiz</button>';
           $scope.popupText = $sce.trustAsHtml('Stating ' + quiz.name + startButton);
           $scope.showStart = false;
           $scope.showPopup = true;
       }
    };
    $scope.startQuiz = function() {
        $scope.showPopup = false;
        if ($scope.quiz.state === 'initialized') {
             $scope.quiz.start();
             $scope.quizTimer.start($scope, $timeout);
        }
    };

HTML:

<div id="popupBox">
    <div id="closePopup" data-ng-click="closePopup()">X</div>
    <div data-ng-bind-html="popupText"></div>
</div>
8
cw24 27 Nov. 2013 im 02:43

3 Antworten

Beste Antwort

Mit Hilfe der anderen Antworten habe ich Folgendes erreicht (dies ist wahrscheinlich nicht der beste Weg, aber es funktioniert. Bitte kommentieren Sie, ob es Möglichkeiten gibt, dies zu verbessern.):

Reglerin:

    ...
    $scope.compiledStartPopupText = $compile(angular.element('<br><br><button data-ng-click="startQuiz()">start quiz</button>'))($scope);
    $scope.popupText = 'Starting ' + $scope.quiz.name;
    $scope.getCompiledStartPopupText = function() {
        return $scope.compiledStartPopupText;
    };
    $scope.openStartQuizPopup = function()
    {
        if ($scope.quiz.state === 'finished' || $scope.quiz.state === 'initialized') {
            if($scope.quiz.state === 'finished') {
                $scope.quiz.reinitialize();
            }
            $scope.showPopup = true;
        }
    };
    $scope.closePopup = function() {
        $scope.showPopup = false;
        if($scope.quiz.state !== 'started') {
            $scope.showStart = true;
        }
    };
    $scope.startQuiz = function() {
        $scope.showStart = false;
        $scope.showPopup = false;
        if ($scope.quiz.state === 'initialized') {
            $scope.quiz.start();
            $scope.quizTimer.start($scope, $timeout);
        } else if ($scope.quiz.state === 'finished') {
            $scope.quiz.restart();
            $scope.quizTimer.restart($scope, $timeout);
        }
    };
    $scope.endGame = function()
    {
        $scope.quiz.state = 'finished';
        $scope.showPopup = true;
        $scope.showStart = true;
    };
    ...

Richtlinie:

    directive('popUp', function() {
        return {
            restrict: 'A',
            link: function($scope, elm, attrs) {
                $scope.$watch('quiz.state', function(value){
                    if(value === 'finished') {
                        elm.html('finished');
                    } else {
                        var compiledStartButton = $scope.getCompiledStartPopupText();
                        elm.html($scope.popupText);
                        elm.append(compiledStartButton);
                    }
                });
            }
        };
    };

HTML:

    <div id="popup" ng-show="showPopup">
        <div id="popupBox">
            <div id="closePopup" data-ng-click="closePopup()">X</div>
            <div data-pop-up class="cta"></div>
        </div>
    </div>
4
cw24 27 Nov. 2013 im 22:27

Mit dem $ compile service können Sie beliebigen HTML-Code im Kontext eines bestimmten Codes auswerten Umfang. Beispiel:

var element = $compile(angular.element('<button ng-click="doSomething()"></button>'))(scope);

Die Variable element enthält dann ein angle.element (oder jQuery, wenn Sie es verwenden), das Sie an einer beliebigen Stelle im DOM einfügen können. Durch Klicken auf die Schaltfläche wird scope.doSomething() aufgerufen. Hoffe das hilft.

2
lex82 26 Nov. 2013 im 23:30

Wenn Sie versuchen, closePopup() aufzurufen, nehmen wir an, Ihre App wird oben im HTML-Code initialisiert und Sie haben auch eine ng-controller="MsgCtrl", innerhalb des Controllers haben Sie Ihren Code

<div id="popupBox">
    <div id="closePopup" data-ng-click="closePopup()">X</div>
    <div data-ng-bind-html="popupText"></div>
</div>

Und schreiben Sie dann im Skript Ihrer App so etwas

function MsgCtrl($scope) {
    $scope.closePopup = function () {
        console.log("function called");
    };
}

Schauen Sie sich das an, um ein ähnliches Beispiel zu erhalten, und experimentieren Sie damit.

2
C. S. 26 Nov. 2013 im 23:28