我們可以使用jquery裏面的angularjs函數

我在jquery中有一個表格，其中當我點擊delete圖標時我需要顯示bootstrap modal來執行delete動作。
我用jquery做了它，但我不知道在角度上做...可以給我一些建議嗎？我們可以使用jquery裏面的angularjs函數

<body ng-app="intranet_App"> 
    <div class="container"> 
     <div class="modal" id="deleteProject"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-body" id="confirmMessage"> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" id="confirmOk">Ok</button> 
         <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button> 
        </div> 
       </div> 
      </div> 
     </div> 
      <div class="col-xs-12 margin20 padding table-responsive"> 
       <table class="col-xs-12 table table-hover table-bordered" id="projectList" ng-controller="myCtrl"> 
        <thead class="colorBlue"> 
         <tr><th>Project Name</th><th>Client</th><th>Client Co-ordinator</th><th>Action</th></tr> 
        </thead> 
        <tbody id="projectListTBody" > 
         <tr ng-repeat="x in projectList | filter:ProjectName"> 
          <td>{{ x.ProjectName}}</td> 
          <td>{{ x.Client}}</td> 
          <td>{{ x.OnsiteCoordinator}}</td> 
          <td> 
           <i class="fa fa-user-plus fa-2x" ng-click="addResource()"></i> 
           <i class="fa fa-edit fa-2x" ng-click="editProj(x.Id)"></i> 
           <i class="fa fa-trash fa-2x" data-toggle="modal" data-target="#myModal" data-dismiss="modal" ng-click="deleteProject(x.Id)"></i> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
    </div> 
</body> 

<script> 
    var app = angular 
        .module("intranet_App", []) 
        .controller("myCtrl", function ($scope, $http) { 
         $scope.projDetails = []; 

         $http.post('/Project/getProjectsList') 
          .then(function (response) { 
           console.log(response) 
           $scope.projectList = response.data; 
          }) 

         $scope.editProj = function (x) { 
          $scope.projectDetails(x); 
          window.location = "/Project/EditProject?id=" + x; 
         } 

         $scope.projectDetails = function (x) { 
          $scope.projDetails.push(x); 
          $scope.json = angular.toJson($scope.x) 
          console.log($scope.json) 
         } 
         $scope.addResource = function() { 
          window.location = "/Project/ProjectRes"; 
         } 

        }); 
</script>

這是我的jQuery方法：

function deleteProject(control) { 
    event.stopPropagation() 
    id = $(control).closest('tr').attr('id'); 
    confirmDialog("Are you sure do you want to delete this Project?", function() { 
     removeProject(id) 
    }); 
} 
function removeProject(elem) { 
    var updatedBy = $("#userName").text(); 
    var ajxObj = { id: elem}; 
    $.ajax({ 
     type: "POST", 
     url: "/project/ProjectDelete", 
     data: JSON.stringify(ajxObj), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     async: true, 
     cache: false, 
     success: function (msg) { 
      $(".success").html("project Deleted successfully!"); 
      $('.success').show(); 
      setTimeout(function() { 
       $('.success').hide(); 
      }, 1000); 
      loadProjectsList() 
     } 
    }); 
}

來源

2017-06-12 user7397787

的基線，**不要'angularjs'工作時使用**'jquery'。 –

看看AngularJS的[Bootstrap.ui]（https://angular-ui.github.io/bootstrap/#!#modal）實現，你有一個本地模型解決方案 –

答案很長。如果您的JQuery調用正在操作DOM，那麼他們絕對應該從普通控制器的_directive_和_not_中調用。根據我的經驗，將JQuery的東西整合到Angular中是一件令人頭疼的事，甚至可能不值得麻煩。 –

您可以使用自舉角模式彈出。

來源

2017-06-12 11:12:13

我們可以使用jquery裏面的angularjs函數

回答

相關問題