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

I am trying to include function inside ng-include directive. The function takes in parameter and based on this loads dynamic content.

I am using the following syntax to achieve this functionality but is not working.

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

And here is my controller

  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;
            })
        };
    });

I assume it is not working because you are performing an asynchronous call inside of the getCategoryDetail function. Additionally, you are assigning the result of the POST to a 'results' scope variable, but you aren't using it anywhere inside the include.

This post might answer your issue. Angular.js directive dynamic templateURL

I think a custom directive could help out a lot.

In your main controller:

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

Then you can define a directive, let's call it 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;
            });
        }]
    };
}])

Now we can use our directive. In your main HTML page:

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

this will render one div for each category id and each will load its own data. Hopefully this helps. I haven't tested this, so it may need some tweaks.