javascript - 为什么我的 Angular 代码似乎正在回发

Question

我正在尝试对数据库进行一次初始调用以加载一些下拉列表，从那时起，一切都是通过 AJAX 完成的。当我单击页面上的按钮时，它似乎正在回发，就像当我在 Fiddler 中查看时，我看到每次单击按钮时都会调用该函数来提取下拉列表的值。

(function () {
angular.module('customModuleApp', [])
.controller('customModuleCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.frequencies = [];
    $scope.users = [
        {
            Name: 'Tom',
            Address: '123 main',
        },
        {
            Name: 'Bob',
            Address: '124 main',
        }
    ];
    $(document).ready(function () {
            $http({
                method: 'POST',
                url: 'Page.aspx/GetFrequencies',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                data: {}
            }).success(function (data) {
                $scope.frequencies = data.d;
                $scope.selected = $scope.frequencies[0];
            }).error(function (jqXhr, status, errorThrown) {
                alert('Error: ' + errorThrown);
            });
    });


    $scope.addModule = function () {
        try{
            alert('module added!');
            return false;
        } catch (e) {
            alert(e.message);
        }

    };
    $scope.updateModule = function () {
        try {
            alert('module updated!');
            return false;
        } catch (e) {
            alert(e.message);
        }

    };
    $scope.removeModule = function () {
        try {
            alert('module removed!');
            return false;
        } catch (e) {
            alert(e.message);
        }

    };
}])
.directive('moduleForm', function () {
    return {
        restrict: 'E',
        templateUrl: '../../Templates/module-form.html' 
    }
});
})();

HTML

                    <div style="margin:0 auto;position:relative;width:500px;">
                    <div style="background:url('../../Images/rg_header_bg.png') repeat-x #718CA1;border: 1px solid #3d556c;border-radius:10px 10px 0 0;height:24px;"></div>
                    <div class="gridHeader" style="width:50%;">This is a test</div>
                    <div class="gridHeader" style="width:50%;right:0;">To create a reusable template</div>
                </div>
                <div style="margin:0 auto;background-color:#fff;width:500px;position:relative;" ng-app="customModuleApp">
                    <div ng-controller="customModuleCtrl">
                        <module-form></module-form>
                    </div>
                </div>
            </div>

以及“module-form”指令 html: 模块名称: 频率:

    </table>
    <hr style="background-color:gray;height:1px;width:100%;text-align:left;" />
    <table>
        <tr><td>Table Column Name</td><td><input type="text" /></td></tr>
        <tr><td>Meter Attribute</td><td><input type="text" /></td></tr>
        <tr>
            <td>
                <button style="background-color:transparent;border:none;" ng-click="addModule();">
                    <img src="../Images/functionbuttons/add_button.png" alt="" />
                </button>
            </td>
            <td>
                <button style="background-color:transparent;border:none;" ng-click="updateModule();"><img src="../Images/functionbuttons/edit_button.png" alt="" /></button>&nbsp;
                <button style="background-color:transparent;border:none;" ng-click="removeModule();"><img src="../Images/functionbuttons/delete_button.png" alt="" /></button>
            </td>

        </tr>
    </table>

</form>

我在这里缺少什么？为什么每次我单击添加/编辑/删除按钮之一时都会调用 GetFrequencies 函数？难道是因为它位于 ASP.Net 母版页上的内容控件内？

Answer 1

如果您需要调用一次，请将您的 ajax 调用封装在 JavaScript 函数中，如下所示。

$scope.getFrequencies= function () {
                //your ajax method
            };

 $scope.getFrequencies();

完全删除下面提到的代码片段并按照上面提到的操作。

 $(document).ready(function () {
            $http({
                method: 'POST',
                url: 'Page.aspx/GetFrequencies',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                data: {}
            }).success(function (data) {
                $scope.frequencies = data.d;
                $scope.selected = $scope.frequencies[0];
            }).error(function (jqXhr, status, errorThrown) {
                alert('Error: ' + errorThrown);
            });
    });