[英]How to add a html button with angularjs with a working ng-click function
I am working on a game made with angularjs. 我正在研究用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. 由于内容是动态的,因此ng-click功能不起作用。
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? 我的具体问题是如何将HTML按钮添加到包含实际触发的ng-click功能的angularjs?
Edit: here one attempt (that actually gets the button to show, but ng-click does nothing): Controller: 编辑:这里有一次尝试(实际上是按钮显示,但是ng-click什么也没做):控制器:
{
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: HTML:
<div id="popupBox">
<div id="closePopup" data-ng-click="closePopup()">X</div>
<div data-ng-bind-html="popupText"></div>
</div>
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: 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>
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 如果你试图调用closePopup()
,假设您的应用程序在html顶部初始化,并且你有一个ng-controller="MsgCtrl"
,在控制器中有你的代码
<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. 看看这个类似的例子,然后用它进行实验。
By using the $compile service , you can evaluate arbitrary HTML in the context of a certain scope. 通过使用$ compile服务 ,您可以在特定范围的上下文中评估任意HTML。 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. 然后,变量element
包含一个angular.element(或jQuery,如果您正在使用它),您可以在DOM中的任何位置插入。 Clicking the button will result in an invocation of scope.doSomething()
. 单击该按钮将导致调用scope.doSomething()
。 Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.