如何在Angular JS中的ng-include指令中包含带参数的函数

Question

我试图在 ng-include 指令中包含函数。该函数接受参数并基于此加载动态内容。

我正在使用以下语法来实现此功能，但无法正常工作。

<div ng-controller="MyCtrl">
<div ng-include src="'getCategoryDetail(cat_id)'"></div>
<div>{{results}}</div>
</div>

这是我的控制器

  myapp.controller('MyCtrl', function($scope, $http) {
        $scope.getCategoryDetail=function(catid)
        {
            $scope.catid=catid;
            $http.post('categoryDetail.php',{catId:scope.catid}).success(function(data) {
            $scope.results=data;
            })
        };
    });

Answer 1

我认为它不起作用，因为您正在 getCategoryDe​​tail 函数内部执行异步调用。此外，您将 POST 的结果分配给“结果”范围变量，但您没有在包含内的任何地方使用它。

这篇文章可能会回答您的问题。 Angular.js directive dynamic templateURL

Answer 2

我认为自定义指令可以提供很大帮助。

在你的主控制器中：

myapp.controller('MyCtrl', function($scope) {
    $scope.categoryIds = ids //I don't know where these come from, but that's up to you.
});

然后你可以定义一个指令，我们称之为category

myapp.directive('category', ['$http', function ($http) {
return {
    restrict : 'A',
    template : '<div>{{results.dataItem1}}</div>', //You could define your template in an external file if it is complex (use templateUrl instead to provide a URL to an HTML file)
    replace: true,
    scope: {
        category: '@',
    },
    controller: ['$scope', '$element', '$attrs', '$http',
        function($scope, $element, $attrs, $http) { 
            $http.post('categoryDetail.php', {catId:$scope.category}).success(function(data) {
                $scope.results = data;
            });
        }]
    };
}])

现在我们可以使用我们的指令了。在您的主 HTML 页面中：

<div ng-controller="MyCtrl">
    <div ng-repeat="catId in categoryIds" category="catId"></div>
</div>

这将为每个类别 id 呈现一个 div，每个类别都将加载自己的数据。希望这会有所帮助。我尚未对此进行测试，因此可能需要进行一些调整。