How to add a html button with angularjs with a working ng-click function

angularjs, javascript, jquery

Solution

Using the help from the other answers I got it to work by doing the following (this is probably not the best way, but it works. Please comment if there is someway to improve this.):

Controller:

    ...
    $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:

    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>

Problem

I am working on a game made with angularjs. I have one problem that I haven't been able to solve yet. I would like to use a popup dialog ( no alert ) whose content depends on the context. This popup contains a button, that when clicked starts the game. Since the content is dynamic the ng-click function does not work. I've tried with directives and straight from the controller but have not gotten it to work. My concrete question is how do I add HTML Button to a with angularjs that contains a ng-click function that will actually fire? Edit: here one attempt (that actually gets the button to show, but ng-click does nothing): 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> ```

Original source