How to add html button with corner functions with ng-click working function

Question

I am working on a game made with corner. I have one problem that I have not been able to solve yet. I would like to use a pop-up dialog box (without warning), the contents of which depend on the context. This popup contains a button that, when clicked, starts with the game.

Since the content is dynamic, the ng-click function does not work.

I tried with directives and directly from the controller, but did not get it to work.

My specific question is how to add an HTML button to an element with corner elements containing an ng-click function that really works?

Edit: here is one try (actually a button appears for showing, 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> 

Answer 1

With other answers, I got it for work by doing the following (this is probably not the best way, but it works. Please comment if there is a way 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> 

Answer 2

If you try to call closePopup() , let's say your application is initialized at the top of the html, and you have ng-controller="MsgCtrl" and your code is inside the controller

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

and then in your application script 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.

Answer 3

Using the $ compile service, you can evaluate arbitrary HTML in the context of a specific area. Example:

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

Then the element variable contains an angular.element element (or jQuery if you use it) that you can insert into the DOM. When the button is scope.doSomething() called. Hope this helps.