我正在开发一款使用 angularjs 制作的游戏。我有一个问题,我还没有能够解决。我想使用一个弹出对话框(无警报),其内容取决于上下文。此弹出窗口包含一个按钮,单击该按钮即可开始游戏。
由于内容是动态的,所以 ng-click 功能不起作用。
我已经尝试使用指令并直接从 Controller 发出,但没有让它工作。
我的具体问题是如何将 HTML 按钮添加到包含实际触发的 ng-click 函数的 angularjs 中?
编辑:这是一次尝试(实际上是让按钮显示,但 ng-click 什么都不做): 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>
最佳答案
在其他答案的帮助下,我通过执行以下操作使其正常工作(这可能不是最好的方法,但它确实有效。如果有任何改进方法,请发表评论。):
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('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>
关于javascript - 如何使用具有工作 ng-click 功能的 angularjs 添加 html 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20229557/