2016-09-21 97 views
-1

我有一個ASP.NET MVC web應用程序。我用AngularJS網格替換現有的表格控件(JQuery html編碼)。 我想通過jQuery點擊事件將id值傳遞給AngularJs應用程序。在點擊事件下面的代碼不工作。請建議正確的方式來傳遞值。使用angular.element不起作用。從Jquery事件傳遞值到AngularJS

$(".bs-example").on('click', '#alldiv a', function() { 
      var id = $(this).attr("id"); 
      // This id is required to use in angular app 
      angular.element($("#my-table")).scope().getData(); 
}); 


var myApp = angular.module('myGrid', ['ngTable']); 
      myApp.controller('gridCtrl', ['$scope', '$http', 'services', 'NgTableParams', function (scope, http, ser, NgTableParams) { 
       ser.getData().success(function (response) { 
        scope.agendas = response; 
        scope.tableParams = new NgTableParams({ page: 1, count: 2 }, { dataset: scope.mydata }); 
       }); 
       scope.mydata = { 
        data: 'mydata' 
       } 
      }]); 
      myApp.service('services', function ($http) { 

       this.getData = function() { 
        // Need id from button jQuery click event 
        var result = $http.get('/Home/GetData/' + id); 
        return result; 
       }; 
      }); 



<div data-ng-app="myGrid" data-ng-controller="gridCtrl" id="my-table"> 
//..... 
</div 
+0

建立在你的控制器接受了'id'的方法 - 比方說,'loadGrid(ID)',然後傳遞相同的ID到'getData()'。然後將您的'angular.element'語句改爲'angular.element($(「#my-table」))scope()。loadGrid(id)' –

回答

0

這應該有效。 編輯:

$(".bs-example").on('click', '#alldiv a', function() { 
        var id = $(this).attr("id"); 
        //HEre you pass a id to angular controller. 
        angular.element($("#my-table")).scope().getData(id); 
     }); 





     var myApp = angular.module('myGrid', ['ngTable']); 
        myApp.controller('gridCtrl', ['$scope', '$http', 'services', 'NgTableParams', function (scope, http, ser, NgTableParams) { 
         $scope.GetData = function(id) { 
         ser.getData(id).success(function (response) { 
          scope.agendas = response; 
          scope.tableParams = new NgTableParams({ page: 1, count: 2 }, { dataset: scope.mydata }); 
         }); 
} 
         scope.mydata = { 
          data: 'mydata' 
         } 
        }]); 
        myApp.service('services', function ($http) { 

    //Add to this function parameter 
         this.getData = function (id) { //here declare that this function 
          // Need id from button jQuery click event 
          var result = $http.get('/Home/GetData/' + id); 
          return result; 
         }; 
        }); 

IHMO這裏更好的選擇將是使用NG單擊角法上的DIV,你瓦納點擊。 https://docs.angularjs.org/api/ng/directive/ngClick

+0

'getData'不在'my-表'雖然因爲它不是在控制器中聲明的方法,對吧? –

+0

我讓編輯代碼becouse第一次我誤解你。 由於這個堆棧編輯器不是「代碼友好」的,因此可能會出現括號問題。 – Ridikk12

+0

@ Ridikk12我試過你的代碼,但得到的錯誤爲「Uncaught TypeError:angular.element(...)。scope(...).getData不是一個函數」在jQuery點擊事件 –

-1

我能夠調用從JQuery的角函數下面的代碼

$(".bs-example").on('click', '#alldiv a', function() { 
      var id = $(this).attr("id"); 
      var scope = angular.element(document.getElementById("my-table")).scope(); 
      scope.$apply(function() { 
       scope.save(id); 
      }); 
});