![](/img/trans.png)
[英]AngularJS ng-click() is not working in dynamic call by .append(' ') function in controller
[英]Call an AngularJS function on button click is not working
我有一個要求,我想在單擊按鈕時調用angularJS
函數。 所以我嘗試如下
var app2 = angular.module('grdContrl', ['datatables']);
app2.controller('dtAssignVendor', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.GetFiler = function () {
var strZone = $('#SAPExecutive_R4GState').val();
var strUtility = $('#ddlUtility').val();
$scope.dtColumns = [
DTColumnBuilder.newColumn(null, '').renderWith(function (data, type, full) {
return '<input type="checkbox" class="check" data-object-id="' + full.objectid + '">'
}),
DTColumnBuilder.newColumn("MAINTENANCEZONENAME", "MAINTENANCEZONENAME"),
DTColumnBuilder.newColumn("MAINTENANCEZONECODE", "MAINTENANCEZONECODE")
]
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
url: AppConfig.PrefixURL + "/App/GetMPFilter",
type: "POST",
data: JSON.stringify({ strZone: strZone, strUtility: strUtility }),
})
.withPaginationType('full_numbers')
.withDisplayLength(10);
}
}])
<button class="btn btn-default customBtn" ng-click="GetFilter();">
<i class="fa fa-filter" aria-hidden="true"></i>
Filter
</button>
---------------------------
<div ng-app="grdContrl">
<div class="flTable" id="dtAssignVendor">
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%">
</table>
</div>
</div>
我希望它能在上述按鈕單擊上起作用。 請幫忙
你不能得到過濾器值,因為過濾器按鈕控制器之外,如果你正在使用datatable
,然后還加dt-option
, dt-columns
和dt-instance
為<table>
的屬性。
你喜歡這樣
<div ng-app="grdContrl" ng-controller="dtAssignVendor"> <!-- COMMON ANCESTOR-->
<button class="btn btn-default customBtn" ng-click="GetFilter();">
<i class="fa fa-filter" aria-hidden="true"></i> Filter
</button>
<div class="flTable" id="dtAssignVendor">
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%" datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstanceNonInvProduct">
</table>
</div>
</div>
同時注入控制器。
app2.controller('dtAssignVendor',function ($scope, $http, DTOptionsBuilder, DTColumnBuilder,DTInstances) {
$scope.GetFiler = function () {
//get input values into scope instead of javascript variable
//var strZone = $('#SAPExecutive_R4GState').val();
//var strUtility = $('#ddlUtility').val();
$scope.strZone = $scope.SAPExecutive_R4GState;
$scope.strUtility = $scope.ddlUtility;
//redraw table on button click
$scope.dtInstanceNonInvProduct.DataTable.draw();
}
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
url: AppConfig.PrefixURL + "/App/GetMPFilter",
type: "POST",
data: JSON.stringify({ strZone: $scope.strZone, strUtility: $scope.strUtility }),
})
.withPaginationType('full_numbers')
.withDisplayLength(10);
$scope.dtColumns = [
DTColumnBuilder.newColumn(null, '').renderWith(function (data, type, full) {
return '<input type="checkbox" class="check" data-object-id="' + full.objectid + '">'
}),
DTColumnBuilder.newColumn("MAINTENANCEZONENAME", "MAINTENANCEZONENAME"),
DTColumnBuilder.newColumn("MAINTENANCEZONECODE", "MAINTENANCEZONECODE")
]
$scope.dtInstanceNonInvProduct = {};
})
據我所知,您沒有將控制器綁定到模板,您需要使用ng-controller
指令並將按鈕包裝在其中(並糾正$scope.getFilter
中提到的$scope.getFilter
的拼寫錯誤)
<div ng-app="grdContrl" ng-controller="dtAssignVendor"> <!-- COMMON ANCESTOR-->
<button class="btn btn-default customBtn" ng-click="GetFilter();">
<i class="fa fa-filter" aria-hidden="true"></i> Filter
</button>
---------------------------
<div class="flTable" id="dtAssignVendor">
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%">
</table>
</div>
</div>
您的代碼模板應如下所示:
<div ng-app="myApp">
<div controller="ctrl1">
<button ng-click="someFunInCtrl1()">Click Me</button>
...
</div>
<div controller="ctrl2">
<button ng-click="someFunInCtrl2()">Click Me</button>
...
</div>
</div>
您無法調用GetFilter
函數,因為您是在外部控制器作用域內調用它。 正如@Karim所說
您需要使用ng-controller指令並將按鈕包裝在其中
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.