如何使用帶有工作ng-click功能的angularjs添加html按鈕

Question

我正在研究用angularjs制作的游戲。 我有一個問題，我還沒有解決。 我想使用一個彈出對話框（無警報），其內容取決於上下文。 此彈出窗口包含一個按鈕，單擊該按鈕即可啟動游戲。

由於內容是動態的，因此ng-click功能不起作用。

我已嘗試使用指令直接從控制器，但沒有得到它的工作。

我的具體問題是如何將HTML按鈕添加到包含實際觸發的ng-click功能的angularjs？

編輯：這里有一次嘗試（實際上是按鈕顯示，但是ng-click什么也沒做）：控制器：

    {
       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>

Answer 1

使用其他答案的幫助，我通過執行以下操作使其工作（這可能不是最好的方法，但它確實有效。請評論是否有某種方法可以改善這一點。）：

控制器：

    ...
    $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;
    };
    ...

指示：

    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>

Answer 2

如果你試圖調用closePopup() ，假設您的應用程序在html頂部初始化，並且你有一個ng-controller="MsgCtrl" ，在控制器中有你的代碼

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

然后在你的應用程序的腳本中，寫下這樣的東西

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

看看這個類似的例子，然后用它進行實驗。

Answer 3

通過使用$ compile服務 ，您可以在特定范圍的上下文中評估任意HTML。 例：

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

然后，變量element包含一個angular.element（或jQuery，如果您正在使用它），您可以在DOM中的任何位置插入。 單擊該按鈕將導致調用scope.doSomething() 。 希望這可以幫助。