Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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.):</p> <p>Controller:</p> <pre><code> ... $scope.compiledStartPopupText = $compile(angular.element('&lt;br&gt;&lt;br&gt;&lt;button data-ng-click="startQuiz()"&gt;start quiz&lt;/button&gt;'))($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; }; ... </code></pre> <p>Directive:</p> <pre><code> 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); } }); } }; }; </code></pre> <p>HTML:</p> <pre><code> &lt;div id="popup" ng-show="showPopup"&gt; &lt;div id="popupBox"&gt; &lt;div id="closePopup" data-ng-click="closePopup()"&gt;X&lt;/div&gt; &lt;div data-pop-up class="cta"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload