Вызов функции AngularJS при нажатии кнопки не работает - PullRequest
Новая
       12

Вызов функции AngularJS при нажатии кнопки не работает

0 голосов
/ 05 февраля 2019

У меня есть требование, при котором я хочу вызвать функцию 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>

Я хочу, чтобы это работало на вышеупомянутом нажатии кнопки.Пожалуйста, помогите

Ответы [ 3 ]

0 голосов
/ 05 февраля 2019

Шаблон вашего кода должен выглядеть примерно так: 

<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 и обернуть кнопку внутри нее

0 голосов
/ 05 февраля 2019

Вы не можете получить значения фильтра, потому что кнопка фильтра находится за пределами контроллера, и если вы используете 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 = {};
})
0 голосов
/ 05 февраля 2019

Насколько я вижу, вы не связали контроллер с вашим шаблоном, вам нужно использовать директиву ng-controller и обернуть кнопку внутри нее (и исправить ошибку правописания на $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>

...