एक काम करने वाले एनजी-क्लिक फ़ंक्शन

Question

के साथ angularjs के साथ एक HTML बटन कैसे जोड़ें I angularjs से बने गेम पर काम कर रहा हूं। मुझे एक समस्या है कि मैं अभी तक हल करने में सक्षम नहीं हूं। मैं एक पॉपअप संवाद (कोई चेतावनी) का उपयोग करना चाहूंगा जिसका सामग्री संदर्भ पर निर्भर करता है। इस पॉपअप में एक बटन होता है, जब क्लिक किया जाता है तो गेम शुरू होता है।

चूंकि सामग्री गतिशील है ng-click फ़ंक्शन काम नहीं करता है।

मैंने निर्देशकों से सीधे और नियंत्रक से कोशिश की है लेकिन इसे काम करने के लिए नहीं मिला है।

मेरा ठोस सवाल यह है कि मैं एंजुलरजेज़ के साथ HTML बटन कैसे जोड़ूं जिसमें एक एनजी-क्लिक फ़ंक्शन है जो वास्तव में आग लग जाएगा?

संपादित करें: यहाँ एक प्रयास (है कि वास्तव में बटन को दिखाने के लिए हो जाता है, लेकिन एनजी क्लिक कुछ नहीं करता है): नियंत्रक:

{ 
     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); 
     } 
    }; 

एचटीएमएल:

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

Answer 1

अन्य उत्तर मैं इसे निम्न कार्य करके काम मिल गया से मदद का उपयोग करना (। यह शायद सबसे अच्छा तरीका नहीं है, लेकिन यह काम करता है अगर वहाँ किसी न किसी प्रकार है इस सुधार करने के लिए टिप्पणी दें।):

नियंत्रक :

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

Answer 2

आप करने की कोशिश कर रहे हैं, तो कॉल करें closePopup(), मान लीजिए कि आपका ऐप एचटीएमएल के शीर्ष पर शुरू हुआ है और आपके पास ng-controller="MsgCtrl" भी है, नियंत्रक के भीतर आपका कोड

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

और फिर अपने ऐप की लिपि में, एक similar example के लिए इस पर इस

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

देखो और इसके साथ प्रयोग की तरह कुछ लिखें।

Answer 3

$compile service का उपयोग करके, आप एक निश्चित दायरे के संदर्भ में मनमानी HTML का मूल्यांकन कर सकते हैं। उदाहरण:

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

चर element तो (या jQuery अगर आप इसे उपयोग कर रहे हैं) एक angular.element होता है, जो डोम में कहीं भी सम्मिलित कर सकते हैं। बटन पर क्लिक करने से परिणामस्वरूप scope.doSomething() का आविष्कार होगा। उम्मीद है की यह मदद करेगा।