如何使用带有工作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() 。 希望这可以帮助。