AngularJS ng-show指令不能像範圍函數那樣工作

Question

這個簡單的ng-show指令有什麼問題？它應該是簡單，因爲我不得不使用NG-展示和點擊第三個按鈕時，這兩個按鈕會顯示所以他們被隱藏的按鈕被點擊

的JavaScript

$scope.addQuestion = function() { 
     $('button#addQuestion').click(function(){ 
      $scope.addQuestion = true; 
      console.log("clicked"); 
     }) 
    } 

HTML

直到隱藏按鈕

<div class="program-edit-btns well"> 
<!--These two buttons are hidden until the third button is clicked--> 
    <div class="btn-group pull-left" ng-show="addQuestion()"> 
    <button type="button" class="btn btn-remove"><i class="fa fa-plus"></i> add</button> 
    <button type="button" class="btn btn-remove"><i class="fa fa-files-o"></i> copy</button> 
</div> 

<!--This button triggers the ng-show--> 
<button id="addQuestion" type="button" class="btn btn-remove pull-left"> 
     <i class="fa fa-plus"></i> question 
    </button> 
</div> 

Answer 1

如果要修改一個jQuery函數內部的範圍，你必須調用$ apply方法手動

$scope.addQuestion = function() { 
     $('button#addQuestion').click(function(){ 
      $scope.addQuestion = true; 
      $scope.$apply(); 
      console.log("clicked"); 
     }) 
    } 

但我很肯定你不需要JQuery來完成你想要的。

Answer 2

你有混搭..你只需要這樣： -

沒有更多的jQuery的單擊事件處理程序，只需添加一個處理函數，設置範圍的變量： -

$scope.addQuestion = function() { 
     $scope.showQuestion = true; 
} 

和ng-show="showQuestion"的部分和ng-click="addQuestion()"在觸發器上。

<div class="program-edit-btns well"> 
<!--These two buttons are hidden until the third button is clicked--> 
    <div class="btn-group pull-left" ng-show="showQuestion"> 
    <button type="button" class="btn btn-remove"><i class="fa fa-plus"></i> add</button> 
    <button type="button" class="btn btn-remove"><i class="fa fa-files-o"></i> copy</button> 
</div> 

<!--This button triggers the ng-show--> 
<button id="addQuestion" ng-click="addQuestion()" type="button" class="btn btn-remove pull-left"> 
     <i class="fa fa-plus"></i> question 
    </button> 
</div>