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

Question

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>

we can't guess how you are trying to do this without seeing some code — charlietfl
– charlietfl, Commented Nov 26, 2013 at 22:54
I would think you would want to do something like ng-click="$rootscope.broadcast(event, data)". Have whatever controller starts your game listening for the event. — Zack Argyle
– Zack Argyle, Commented Nov 26, 2013 at 23:19
You should mark your own answer as the correct one in order to make clear that the problem is solved. you can upvote other helpful answers apart from that. — lex82
– lex82, Commented Nov 27, 2013 at 22:48
I purposely haven't marked my answer as correct yet, because I am not convinced that it is the best. I am waiting for feedback. — cw24
– cw24, Commented Nov 28, 2013 at 7:58

cw24 · Accepted Answer · 2013-11-27 22:27:32Z

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>

Since no feedback has come, I have marked this answer. Still if there is anything I could do better please let me know.

C. S. · Accepted Answer · 2013-11-26 23:28:13Z

2

If you are trying to call closePopup(), let's say your app is initialized at the top of the html and you have a ng-controller="MsgCtrl" as well, within the controller have your code

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

and then in the script of your app, write something like this

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

Look at this for a similar example and experiment with it.

answered Nov 26, 2013 at 23:28

C. S.

8217 silver badges7 bronze badges

1 Comment

cw24 Over a year ago

Thanks, but getting the popup to close was not the problem. I needed to change the text of the popup and add a button for the user to click when starting.

lex82 · Accepted Answer · 2013-11-26 23:30:08Z

2

By using the $compile service, you can evaluate arbitrary HTML in the context of a certain scope. Example:

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

The variable element then contains an angular.element (or jQuery if you are using it) that you can insert anywhere in the DOM. Clicking the button will result in an invocation of scope.doSomething(). Hope this helps.

answered Nov 26, 2013 at 23:30

lex82

11.4k2 gold badges48 silver badges72 bronze badges

1 Comment

cw24 Over a year ago

Thanks this added another piece to the puzzle. I wasn't quite sure where to add "element" at first. In the end I decided to use it in the directive.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related