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>

＆＃34;模块形式＆＃34;指令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);
            });
    });

为什么我的Angular代码似乎回发了

1 个答案: