ng-click 不会在 ng-table 内外触发

Posted 2023-02-19

【中文标题】ng-click 不会在 ng-table 内外触发

【英文标题】：ng-click does not fire in or out of ng-table

【发布时间】：2017-03-04 10:19:24

【问题描述】：

如何让 ng-click 事件真正触发？我已经尽一切努力让这个工作。我知道警报最初是有效的，但是在显示列表后，神奇的是所有按钮都无法正常工作。

这是页面的显示（警报前/警报后）。我已经验证了每个详细信息按钮都获得了一个唯一的 ID。如您所见，我还尝试了 $parent （因为某些按钮位于 ng-repeat 中）以及 $rootscope 来尝试执行某些操作（即细节按钮）。就好像，在最初显示之后，页面失去了对 angularjs 文件的引用，因为没有任何功能：

When page is first displayed

After getting the data

这是 AngularJS 文件：

var app = angular.module("EmployeeApplication", [])
.controller("EmployeeController",
    function ($scope, $http,$window) 

        AngularInit();

        function AngularInit() 
            //This will be called once per form load, via the ng-load function on the div
            $scope.name = '';
            $scope.gender = '';
            $scope.salary = '';
            $scope.id = '';
            $scope.DisplayAction = 'Unknown';
            $scope.gotdata = false;
            DisplayList();
            ShowAlert('test')
        

        function GetAllEmployees($http) 
            //$scope.Message = 'NULL';
            //$scope.employees = ;
            $http.get('http://localhost:65315/api/employee').then(function (response) 
                $scope.employees = response.data;
                $scope.Message = 'OK';
                $scope.gotdata = true;
            ,
            function (err) 
                $scope.Message = 'Call failed' + err.status + '  ' + err.statusText;
                $scope.employees = ;
                $scope.gotdata = false;
            
            );

            //window.setTimeout(function () 
            //    $scope.gotdata = true;
            //, 1000);
        ;

        function DisplayList() 
            //call the web service to get the list of people
            //set the display action so that the list will be displayed
            GetAllEmployees($http)
            $scope.DisplayAction = 'List';
        ;

        function CreateNewEmployee() 
            $scope.name = '';
            $scope.gender = '';
            $scope.salary = '';
            $scope.id = '';
            $scope.DisplayAction = 'Create';
            $scope.$apply();
        ;

        function ShowDetails(id) 
            //call the web service to get the details of the person
            ShowAlert('test')
            $scope.gotdata = false;
            $http.get('http://localhost:65315/api/employee/' + id).then(function (response) 
                $scope.employees = response.data;
                $scope.DisplayAction = 'Details';
                $scope.Message = 'OK';
            ,
            function (err) 
                $scope.Message = 'Call failed' + err.status + '  ' + err.statusText;
                $scope.employees = ;
            
            );


            //Set the $scope.CurrentEmployee
            $scope.$apply();
        ;
        function ShowAlert(msg)
        
            $window.alert(msg);
        

        function CreateEmployee() 

            //perform the actual creation based on $scope.CurrentEmployee

            //if successful
            DisplayList();
        ;

        function DeleteEmployee(id) 
            $scope.DisplayAction = 'Delete';
            $scope.$apply();
        ;

        function DoDeleteEmployee(id) 
            //Perform actual deletion
            //if successful
            DisplayList();
        ;

        function EditEmployee(id) 
            //get the employee based on ID
            $scope.DisplayAction = 'Edit';
            $scope.$apply();
        ;

        function EditUpdate() 
            //perform the actual update based on $scope.id

            //if successful
            DisplayList();
        ;
    

);

//angular.module('EmployeeApplication', [])
//   .controller('EmployeeController', ['$scope', '$window', function ($scope, $window) 
//       $scope.greeting = 'Hello, World!';
//       $scope.doGreeting = function (greeting) 
//           $window.alert(greeting);
//       ;
//   ]);



var app = angular.module("MyModule", []).controller("MyController", function ($scope, $http)

    $scope.MadeItHereMessage = 'We made it to the controller (first controller)';
    $scope.employees = ;
    $http.get('http://localhost:65315/api/employee').then(function (response) 
        $scope.employees = response.data;
        $scope.Message = "OK";
    ,
    function (err)
    
        $scope.Message = "Call failed" + err.status + "  " + err.statusText;
    
    );

);


//var app = angular.module("MyModule", []).controller("MyController", function initController($scope)
//
//        $scope.MadeItHereMessage = 'This is a loadtest';
//);

//var app = angular.module("EmployeeApplication", ['$rootscope','$scope','$http'])
//.controller("EmployeeController",

//    function AppCtrl($rootscope,$scope, $http)
//    
//        $scope.DisplayAction = "List";
//    

//);

//var app = angular.module("MyModule", []).controller("MyController", function ($scope, $http) 
//    $http.get('EmployeeWebService.asmx/GetAllEmployees').then(function (response) 
//        $scope.employees = response.data;
//    
//    );

//);

这是 HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/EmployeeAngular.js"></script>
    <meta charset="utf-8" />
</head>
<body ng-app="EmployeeApplication">

<div ng-controller="EmployeeController" ng-init="AngularInit()">
    Message
    <br/>
        DisplayAction
    <button id="btnCreateNew1" ng-click="$parent.ShowAlert('Parent scope button pressed')">Show message from parent scope</button>
    <br />
        <!--The following is for listing the entire list of employees-->
        <div id="listSection" ng-show="DisplayAction=='List'">
            <!--The employees data is: employees-->
    <!--<div id="listSection">-->
        <table>
            <thead>List of defined Employees</thead>
            <tr>
                <!--<td><button id="btnCreateNew" ng-click="CreateNewEmployee()">Create Employee</button></td>-->
                <td><button id="btnCreateNew" ng-click="$rootscope.ShowAlert('Create button pressed')">Create Employee</button></td>
            </tr>
            <tr>
                <td ng-show="gotdata">

                    <table id="EmployeeList">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Gender</th>
                                <th>Salary</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="employee in employees" ng-if="employees && employees!=undefined">
                                <td>employee.id</td>
                                <td>employee.name</td>
                                <td>employee.gender</td>
                                <td>employee.salary</td>

                                <td><button id="btnDetailsAemployee.id" ng-click="$parent.ShowDetails(employee.id)">Details</button></td>
                                <td><button id="btnDetailsBemployee.id" ng-click="$parent.ShowDetails(employee.id)">Details B</button></td>
                                <td><button id="btnDetailsCemployee.id" ng-click="ShowDetails(employee.id)">Details C</button></td>
                                <td><button id="btnDetailsDemployee.id" ng-click="$scope.ShowDetails(employee.id)">Details D</button></td>
                                <td><button id="btnDetailsEemployee.id" ng-click="$rootscope.ShowDetails(employee.id)">Details E</button></td>

                                <td><button id="btnDeleteemployee.id" ng-click="$parent.DeleteEmployee(employee.id)">Delete</button></td>
                                <td><button id="btnEditemployee.id"  ng-click="$parent.EditEmployee(employee.id)">Edit</button></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </div>
        <!--The following is for listing the details of a single employee-->
        <div id="DetailsSection" ng-show="DisplayAction=='Details'">
            <table>
                <tr>
                    <td>ID:</td>
                    <td> <input id="DetailsID" value=employee.id /></td>
                </tr>
                <tr>
                    <td>Name:</td>
                    <td><input id="DetailsName" value=employee.name /> </td>
                </tr>
                <tr>
                    <td>Gender:</td>
                    <td><input id="DetailsGender" value=employee.gender /> </td>
                </tr>
                <tr>
                    <td>Salary:</td>
                    <td><input id="DetailsSalary" value=employee.salary /> </td>
                </tr>
                <tr>
                    <td>
                        <button id="NavTolist" ng-click="DisplayList()">Back to List</button>
                    </td>
                    <td>
                        <button id="NavToDelete" ng-click="DeleteEmployee(id)">Delete</button>
                    </td>
                    <td>
                        <button id="NavToEdit" ng-click="EditEmployee(id)">Edit</button>
                    </td>
                </tr>
            </table>
        </div>
        <!--The following is for editing a employee-->
        <!--<div id="EditSection" ng-show="DisplayAction=='Edit'">
            <table>
                <tr>
                    <td>ID:</td>
                    <td>
                        <input id="ID" value=id />
                    </td>
                </tr>
                <tr>
                    <td>Name:</td>
                    <td><input id="" value=name ng-bind="name" /> </td>
                </tr>
                <tr>
                    <td>Gender:</td>
                    <td><input id="" value=gender ng-bind="gender" /> </td>
                </tr>
                <tr>
                    <td>Salary:</td>
                    <td><input id="" value=salary ng-bind="salary" /> </td>
                </tr>
                <tr>
                    <td>
                        <button id="EditUpdate" type="button" value="Update" ng-click="EditUpdate()"></button>
                    </td>
                    <td>
                        <button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
                    </td>
                    <td>
                        <button id="NavToDeleteEdit" type="button" value="Delete" ng-click="DeleteEmployee(id)"></button>
                    </td>
                </tr>
            </table>
        </div>-->
        <!--The following is for verification of deletion-->
        <div id="DeletionSection" ng-show="DisplayAction=='Delete'">
            <table>
                <tr>
                    <td>Do you really want to delete name</td>
                    <td></td>
                    <td>
                        <button id="btnCancelDelete" type="button" value="No" ng-click="DisplayList()"></button>
                    </td>
                    <td>
                        <button id="btnDeleteEmployee" type="button" value="Yes" ng-click="DoDeleteEmployee(id)"></button>
                    </td>
                </tr>
            </table>
        </div>
        <!--The following is for creation of a employee-->
        <!--<div id="CreationSection" ng-show="DisplayAction=='Create'">

            <table>
                <tr>
                    <td>Name:</td>
                    <td><input id="" value="" ng-bind="name" /> </td>
                </tr>
                <tr>
                    <td>Gender:</td>
                    <td><input id="" value="" ng-bind="gender" /> </td>
                </tr>
                <tr>
                    <td>Salary:</td>
                    <td><input id="" value="" ng-bind="salary" /> </td>
                </tr>
                <tr>
                    <td>
                        <button id="btnCreateEmployee" type="button" value="Delete" ng-click="CreateEmployee()"></button>
                    </td>
                    <td>
                        <button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
                    </td>
                </tr>
            </table>

        </div>-->
    </div>
</body>
</html>

【问题讨论】：

为什么要保留javascript函数？您应该将控制器作为 (this.) 或范围函数 ($scope.)。另外，你可以制作一个小提琴或 plnkr 来玩吗？

【参考方案1】：

与普通事件处理程序不同，ng-click 会在控制器范围内寻找事件处理程序，所以当你有：

<button id="NavTolist" ng-click="DisplayList()">Back to List</button>

您的控制器必须：

$scope.DisplayList = function() 
  //call the web service to get the list of people
  //set the display action so that the list will be displayed
  GetAllEmployees($http)
  $scope.DisplayAction = 'List';
;

您可能有兴趣通过网络查看一些sample 项目，以便更好地组织您的代码。

附带说明，尽可能在plunker/jsfiddle/codepen 上对您的网络功能代码进行采样，因为它为任何愿意提供帮助的人提供了巨大的帮助。