如何使用带有工作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>