0

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;
            })
        };
    });
meheshu
  • 31
  • 6

2 Answers2

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

Community
  • 1
  • 1
Vale H
  • 491
  • 5
  • 16
  • 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. – meheshu Mar 26 '14 at 08:16
  • Right, but your getCategoryDetail function doesn't return anything, so your ng-include has src="''" – Vale H Mar 26 '14 at 08:18
  • That is my question. How do i make this function return something? What is wrong with my code? – meheshu Mar 26 '14 at 08:24
  • @meheshu Try using defer `$q` using which you can return from the function. – AlwaysALearner Mar 26 '14 at 08:28
  • Is the data being returned HTML? If you can change your POST to a GET, then I think you could do `
    `     – Vale H Mar 26 '14 at 08:32
  • @CodeHater Can you guide me on this? How do i make use of deferred implementation specific to my needs. If you could show me with some example, it would be great. – meheshu Mar 26 '14 at 08:36
  • @AndrewH The data being returned is in JSON. What i want is keeping models and views separate. Anyway, i will check with your solution and see if it fulfills my requirement. – meheshu Mar 26 '14 at 08:41
  • If the data is JSON, then I don't think you need the ng-include at all (especially since ng-include wants HTML). You can just have {{}} bindings directly to the values inside of your data. Since you assigned the data to your results scope variable, you could have something like {{results.dataItem1}} in your HTML markup because Angular will automatically convert the JSON to javascript objects. – Vale H Mar 26 '14 at 08:44
  • @AndrewH But i need a way to pass my variable(category ids) to the Controller from the template. – meheshu Mar 26 '14 at 08:51
  • Where does cat_id come from? Are you going to have more than one div with different catids? – Vale H Mar 26 '14 at 08:58
  • Exactly, there will be more than one div with different cat_ids. The cat_ids come from another controller which returns an array of catids. I loop through the array using ng-repeat.
    {{results}}
     – meheshu Mar 26 '14 at 09:00
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.

Vale H
  • 491
  • 5
  • 16