How to include function with parameter inside ng-include directive in Angular JS

Question

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

Community · Accepted Answer · 2017-05-23 10:31:49Z

0

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

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 26, 2014 at 8:07

Vale H

4915 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

meheshu Over a year ago

Yes, the asynchronous call is being made inside the function to return result for each specific category id. Also, since the scope variable is a global variable, it should be accessible anywhere within the controller and the 'results' scope variable is binded inside this controller.

Vale H Over a year ago

Right, but your getCategoryDetail function doesn't return anything, so your ng-include has src="''"

meheshu Over a year ago

That is my question. How do i make this function return something? What is wrong with my code?

AlwaysALearner Over a year ago

@meheshu Try using defer $q using which you can return from the function.

Vale H Over a year ago

Is the data being returned HTML? If you can change your POST to a GET, then I think you could do <div ng-include src="categoryDetail.php?cat_id={{scope.catid}}"></div>

|

Vale H · Accepted Answer · 2014-03-26 09:14:48Z

0

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.

answered Mar 26, 2014 at 9:14

Vale H

4915 silver badges17 bronze badges

2 Comments

meheshu Over a year ago

Thanks Andrew. This should definitely help. I will check it out and do some tweaking if need be as per my requiremnt.

Vale H Over a year ago

Great. Please accept my answer if it works for you.

Collectives™ on Stack Overflow

How to include function with parameter inside ng-include directive in Angular JS

2 Answers 2

11 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related