如何用angularjs添加一個帶有工作ng鍵功能的html按鈕

我正在使用angularjs製作遊戲。我有一個問題，我還沒有解決。我想使用一個彈出對話框（無警報），其內容取決於上下文。這個彈出窗口包含一個按鈕，點擊後會開始遊戲。如何用angularjs添加一個帶有工作ng鍵功能的html按鈕

由於內容是動態的，ng-click函數不起作用。

我試過指令，直接從控制器，但沒有得到它的工作。

我的具體問題是如何將HTML按鈕添加到包含實際會觸發的ng-click函數的angularjs？

編輯：這裏一個嘗試（實際獲取的按鈕來顯示，但NG-點擊什麼都不做）：控制器：

{ 
     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>

來源

2013-11-26 cw24

我們無法猜測你是如何在沒有看到代碼的情況下試圖做到這一點的 – charlietfl

我想你會想要做一些像ng-click =「$ rootscope.broadcast（event，data）」的東西。讓任何控制器開始你的遊戲聽事件。 –

您應該將自己的答案標記爲正確答案，以便明確說明問題已解決。除此之外，您還可以加入其他有用的答案。 – lex82

使用來自其他答案我把它做以下工作的幫助（這可能不是最好的方式，但它的工作原理，請發表評論，如果有好歹改善這一點。）：

控制器：

... 
    $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>

來源

2013-11-27 22:27:32 cw24

由於沒有反饋意見，我已經標記了這個答案。如果有什麼我可以做得更好，請讓我知道。 – cw24

如果你想請致電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>

，然後在您的應用程序的腳本，寫這樣的事情

function MsgCtrl($scope) { 
    $scope.closePopup = function() { 
     console.log("function called"); 
    }; 
}

看這一個similar example和試驗它。

來源

2013-11-26 23:28:13

謝謝，但讓彈出關閉不是問題。我需要更改彈出窗口的文本並添加一個按鈕供用戶在啓動時單擊。 – cw24

通過使用$compile service，您可以在特定範圍的上下文中評估任意HTML。例如：

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

可變element然後包含angular.element（或jQuery的，如果正在使用的話），可以在DOM的任意位置插入。單擊該按鈕將導致調用scope.doSomething()。希望這可以幫助。

來源

2013-11-26 23:30:08 lex82

謝謝，這增加了另一塊拼圖。我不確定首先在哪裏添加「元素」。最後我決定在指令中使用它。 – cw24

如何用angularjs添加一個帶有工作ng鍵功能的html按鈕

回答

相關問題