Question

我对AngularJS很新。谢谢你的答案。我的代码如下：

mainModule.controller('MainController', function($scope, $http) {
    $http.get('http://localhost/backend/WebService.php', {params: {entity: 'IndexPageEntity'}}).
    success(function(data) {
        $scope.intro = data[0].IndexPageContent;
});
$http.get('http://localhost/backend/WebService.php', {params: {entity: 'ExhibitionServiceEntity'}}).
    success(function(data) {
        $scope.exhibit = data[0].ExhibitionServiceContent;
});
$http.get('http://localhost/backend/WebService.php', {params: {entity: 'ShootingServiceEntity'}}).
    success(function(data) {
        $scope.shooting = data[0].ShootingServiceContent;
});
});

我的html文件是：

<div ng-controller="MainController">
<div>{{intro}}</div>
<div>{{exhibit}}</div>
<div>{{shooting}}</div>
</div>

我认为必须有一些方法来改进上面的代码，以减少重复。我想要的是在创建时将实体参数传递给控制器。

根据文档，不鼓励使用ng-init传递参数。编写自定义指令以将参数传递给作用域不起作用，因为参数将是覆盖。

在$ http中动态设置params的最佳做法是什么？谢谢。

Answer 1

您应该将所有逻辑移动到服务并使用指令。我建议你修改你的后端以返回相同的结构化数据，而不是IndexPageContent，ExhibitionServiceContent等。它应该是内容或你想要使用的任何名称。但是现在我已经添加了一个替换函数来从实体名称中获取内容的名称。

mainModule.factory('webService', function($http) {
    var apiUrl = 'http://localhost/backend/WebService.php';

    function getContent(params) {
        var config = {
            'params': params
        };
        return $http.get(apiUrl, config);
    };

    return {
        getContent: function(params) {
            return getContent(params)
        }
     };
});

mainModule.controller('MainController', function($scope, webService) {
    var params = {
        'entity': $scope.entity
    };

    var contentName = $scope.entity.replace('Entity', 'Content');

    webService.getContent(params).then(function (data) {
       $scope.content = data[0][contentName];
    }); 

});

mainModule.directive('EntityContent', function() {
    return {
        controller: 'MainController',
        replace: true,
        restrict: 'E',
        scope: {
          entity: '@entity'
        },
        template: '<div>{{ content }}</div>'          
     };
});

<div>
  <entity-content entity="IndexPageEntity">
  <entity-content entity="ExhibitionServiceEntity">
  <entity-content entity="ShootingServiceEntity">
</div>

Answer 2

创建一个对象数据，并在每次调用时发送对象内部键的值。还传递要在范围内设置的键的值..

E.g。

   $scope.makeHttpCall = function(data) {
       $http.get('http://localhost/backend/WebService.php', {params: data}).
        success(function(data) {
            $scope[$scope.key] = data[0][$scope.key];
       });
};

然后您可以将此功能称为

$scope.key = 'IndexPageContent';

 data = {
        entity : 'yourValueHere'
    };

$scope.makeHttpCall(data);

您也可以在范围内为每个请求设置动态的其他值。

我希望这对你有意义......

AngularJS：我应该如何动态设置$ http的参数？

2 个答案: