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

我对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>

{{intro}}
{{附件}
{{射击}

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

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

---

动态设置参数以便在$http中使用的最佳实践是什么？谢谢。

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

例如

然后，您可以将此函数调用为

$scope.key = 'IndexPageContent';

 data = {
        entity : 'yourValueHere'
    };

$scope.makeHttpCall(data);

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

---

我希望这对您有意义…

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

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>

mainModule.factory（'webService'，函数（$http）{
var apiUrl=http://localhost/backend/WebService.php';
函数getContent（params）{
变量配置={
“params”：params
};
返回$http.get（apirl，config）；
};
返回{
getContent:函数（参数）{
返回getContent（参数）
}
};
});
mainModule.controller（'MainController'，函数（$scope，webService）{
变量参数={
“实体”：$scope.entity
};
var contentName=$scope.entity.replace（'entity'，'Content'）；
getContent（参数）。然后（函数（数据）{
$scope.content=数据[0][contentName]；
}); 
});
mainModule.directive（'EntityContent'，function（））{
返回{
控制器：“主控制器”，
替换：正确，
限制：'E'，
范围：{
实体：“@entity”
},
模板：“{content}}”
};
});

谢谢您的回答。但是如何在html中设置$scope.key？我没有使用ng模型，因为我没有使用输入。谢谢……这不是一个合适的方法，但你可以这样做。。你可以这样写。。。如果我理解正确，您希望设置类值，然后让控制器检索值，然后使用它设置参数。我说的对吗？不。。您只需调用函数，该函数将设置$scope.key值。。我告诉过你这不是最好的方法，但是你间接地从HTML设置了$scope.key值。谢谢你的回答。那么我应该如何在html端设置参数呢？我明白了，那么您可能想要使用的是一个指令。让我更新答案。谢谢你的回答。事实上，我的后端会产生类似json的[{IndexPage_id:“1”，IndexPageContent:“Something”}]它有用吗？你解决了吗？那就请接受吧！是的，我终于明白了。当您了解如何使用指令时，一切都很简单。非常感谢。

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>