代码之家 › 专栏 › 技术社区 › Chris

如何让ng init在控制器中使用多个函数?

controller function angularjs

Chris · 技术社区 · 6 年前

<div ng-app="APSApp" class="container">
    <br />
    <br />
    <input type="text" placeholder="Search Terms" />
    <br />
    <div ng-controller="APSCtl" >
        <table class="table">
            <tr ng-repeat="r in searchTerms" ng-init="searchTerms=getSearchTerms()" >
                <td>{{r.DisplayText}} <input type="text" ng-model="r.SearchInput"></td>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript">

    const moduleId = '@Dnn.ModuleContext.ModuleId';
    const tabId = '@Dnn.ModuleContext.TabId';
</script>
<script src="/DesktopModules/RazorCart/Core/Content/Scripts/angular.min.js"></script>

<script src="/DesktopModules/MVC/AdvancedProductSearchMVC/Scripts/AdvancedProductSearch.js"></script>

我的角度设置:

var aps = angular.module("APSApp", []);
aps.config(function($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data) {
        return data !== undefined ? $.param(data) : null;
    };
});

aps.factory('SearchTerms', 
    function($http) {
        return {
            getSearchTerms: function(onSuccess, onFailure) {
                const rvtoken = $("input[name='__RequestVerificationToken']").val();
                $http({
                    method: "post",
                    url: "/DesktopModules/MVC/AdvancedProductSearchMVC/AdvancedProductSearch/GetAPS",
                    headers: {
                        "ModuleId": moduleId,
                        "TabId": tabId,
                        "RequestVerificationToken": rvtoken
                    }
                }).success(onSuccess).error(onFailure);
            }
        };
    });


aps.controller('APSCtl',
    function(SearchTerms, $scope) {
        function getSearchTerms() {
            $scope.searchTerms = [];
            successFunction = function(data) {
                $scope.searchTerms = data;
                console.log($scope.searchTerms);
            };

            failureFunction = function(data) {
                console.log('Error' + data);
            };
            SearchTerms.getSearchTerms(successFunction, failureFunction);
        }

        function doSomethingElse($scope) {}

    });

我正在尝试创建一个具有多个功能的控制器。如果我的角度控制器看起来像这样(而且我不使用ng init),这就可以工作了:

aps.controller('APSCtl',
    function(SearchTerms, $scope) {
            $scope.searchTerms = [];
            successFunction = function(data) {
                $scope.searchTerms = data;
                console.log($scope.searchTerms);
            };

            failureFunction = function(data) {
                console.log('Error' + data);
            };
            SearchTerms.getSearchTerms(successFunction, failureFunction);
    });

我只是想把相关的功能放在一个控制器里。我做错什么了?我真的需要为每个功能设置不同的控制器吗?

1 回复 | 直到 6 年前

Sajeetharan 6 年前

不必在模板中赋值,只需调用函数,

 <table class="table" ng-init="getSearchTerms()>
            <tr ng-repeat="r in searchTerms" >
                <td>{{r.DisplayText}} <input type="text" ng-model="r.SearchInput"></td>
            </tr>
 </table>

在控制器中应该有一个名为getSearchTerms()的函数来调用它,

aps.controller('APSCtl',
    function(SearchTerms, $scope) {
         $scope.getSearchTerms() {
            $scope.searchTerms = [];
            successFunction = function(data) {
                $scope.searchTerms = data;
                console.log($scope.searchTerms);
            };

            failureFunction = function(data) {
                console.log('Error' + data);
            };

            SearchTerms.getSearchTerms(successFunction, failureFunction);
        }

        function doSomethingElse($scope) {}

    });