Question

63

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

rated 0 times [ 65] [ 2] / answers: 1 / hits: 22466 / 11 Years ago, tue, november 26, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rocioblancac

Add To Favorites

Follow

Total Points: 699

Total Questions: 96

Total Answers: 108

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

rocioblancac questions

1 Angular: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Mon, Dec 13, 21, 00:00, 2 Years ago

1 Bootstrap multiple file selection - show only first file

Sun, Jul 26, 20, 00:00, 4 Years ago

1 React JS How to disable zoom

Wed, Jul 22, 20, 00:00, 4 Years ago

1 React Native https axios resquest gets Network Error on Android but not iOS

Thu, Jan 16, 20, 00:00, 4 Years ago

1 Color Input in React: The format is #rrggbb where rr, gg, bb are two-digit hexadecimal numbers

Mon, Jan 6, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jillalanisg · Accepted Answer

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>