如何從AngularJS

Question

在我的html頁面正確開啓和關閉引導模式，我只是一個簡單的引導模式和按鈕來調用它：

 <button class="btn btn-primary" data-toggle="modal" data-target="#addUpdateGroup">Add group</button> 

     <div class="modal fade" id="addUpdateGroup" tabindex="-1" role="dialog" aria-labelledby="addUpdateGrouplLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
        </div> 
        <form name="addUpdateGroupForm" ng-submit="addUpdateGroupForm.$valid && groupCtrl.addUpdateGroup()" novalidate>       
         <div class="modal-body"> 
           <input type="hidden" ng-model="groupCtrl.group.id" name="groupid" /> 
           <label for="groupname">Group name:</label> 
           <br> 
           <input ng-model="groupCtrl.group.name" type="text" name="groupname" id="groupname" required /> 
           <br><br> 
           <label for="groupcolor">Boja grupe:</label> 
         </div> 
         <div class="modal-footer"> 
          <button type="submit" class="btn btn-primary">Add</button> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
         </div> 
        </form>       
       </div> 
      </div> 
     </div> 

這是一個只是簡單的形式。驗證由AngularJS完成。

現在......當用戶提交表單時，我想讓模式關閉，但是隻有當它是有效的輸入時。

所以我把代碼用於關閉模態到控制器：

this.addUpdateGroup = function() { 
    // Adding a new group 
    if (typeof this.group.id === 'undefined') { 
     this.id += 1; 
     this.group.id = this.id; 
     this.groups.push(this.group); 
    // Updating an existing group 
    } else { 
     this.groups[this.group.id].name = this.group.name; 
     this.groups[this.group.id].color = this.group.color; 
    } 
    // Clean the form and remove the modal 
    this.group = {}; 
    $scope.addUpdateGroupForm.$setPristine(true); 
    $('.modal').modal('hide'); 
}; 

但這並不遵循沒有操縱從控制器的DOM的最佳實踐。

問題：有沒有更好的方法？當控制器中的某個函數被調用時，如何實現需要顯示或隱藏的模式？

Answer 1

您沒有遵循Angular最佳實踐。如果你還沒有這樣做，請查看這個傳奇answer：https://stackoverflow.com/a/15012542/202913特別是該帖子的第1 - 3點。

這樣做，你應該使用以下兩個庫中的任何一個。他們都實現引導的功能，但與原生角實現，也就是說，它不依賴於引導的Javascript庫（但不使用引導的CSS）：

1. angular-ui/bootstrap
2. angular-strap

兩者都非常出色，所以請使用任何一種庫對您的編碼風格更加舒適。