AngularJS ng-include scope

Question

I am experienced as a developer but a beginner in angularjs and I have not used javascript for a while.

My site is separated into several angularjs apps. But two apps could have to display the same "entity" types.

For example my first app is dedicated to books and would receive from an api (for example:http://example.com/Books) the following json data:

[
    { "id":"1", "title":"...", "publisher":"..." },
    { "id":"2", "title":"...", "publisher":"..." },
]

The second app is more general and would receive from an api (for example:http://example.com/Things) the following json data:

{
    "count":"3",
    "items":
        // my two books
        { "type":"book", "data":{ "id":"1", "title":"...", "publisher":"..." } },
        { "type":"book", "data":{ "id":"2", "title":"...", "publisher":"..." } },
        // and other things
        { "type":"movie", "data":{ "id":"45", "title":"...", "producer":"..." } },
    ]
}

I created a template "book.html" :

<div>{{book.title}} ({{book.publisher}})</div>

I use it in my view with :

<ul><li ng-repeat="book in books" ng-include="'book.html'"/></ul>

So far so good...

I now would like to use the same template - without duplicating it - to display the books in the first case and in the second with something like :

<ul><li ng-repeat="item in items" ng-include="item.type+'.html'"/></ul>

My issue is not dynamic templates. My issue is: in my book.html template, I use "book.title", but for my second app, I would need to use "item.data.title".

The ideal, in my mind, would have been something like :

<ul><li ng-repeat="item in items" ng-include="item.type+'.html'" ng-something="book=item.data"/></ul>

I could resolve it by "converting" my books array into the second format. But I think I misunderstood something and perhaps I am using angularjs in a wrong way.

Could you please give me some clues ?

Thanks

Would ng-init work? docs.angularjs.org/api/ng/directive/ngInit — ivarni
– ivarni, Commented Jul 30, 2014 at 10:55

Nikos Paraskevopoulos · Accepted Answer · 2014-07-30 11:12:04Z

3

Use directives. They look intimidating at first, but they are quite simple for such use cases:

app.directive("book", function() {
    return {
        restrict: "A",
        templateUrl: "book.html",
        scope: {
            book: "="
        }
}); // isnt' it simple?

First case:

<ul>
    <li ng-repeat="book in books">
        <span book="book"></span>
    </li>
</ul>

Second case:

<ul>
    <li ng-repeat="item in items" ng-switch="item.type">
        <span ng-switch-when="book" book="item.data"></span>
        <span ng-switch-when="movie" movie="item.data"></span>
        ...
    </li>
</ul>

answered Jul 30, 2014 at 11:12

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

2 Comments

Loic Over a year ago

Thank you. It is a good alternative of Ivarni's answer. I am reading more about directives although their declaration seems quite unreadable (or intimidating as you say).

ivarni Over a year ago

@Loic Directives can be complicated things, but the sooner you start working with them the sooner you'll be able to leverage them.

Alex · Accepted Answer · 2014-07-30 11:27:03Z

0

Angular has a built-in directive called ng-init that can be used to evaluate expressions on a scope, meaning it can be used to set scope-variables without having to create a controller or a custom directive.

In this case

    <li ng-repeat="item in items" 
        ng-include="item.type+'.html'" 
        ng-init="book=item.data"/>

Should do the trick, although the documentation specifies that it is not intended for this use-case:

The only appropriate use of ngInit is for aliasing special properties of ngRepeat [$index, $even etc], as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

https://docs.angularjs.org/api/ng/directive/ngInit

edited Jul 30, 2014 at 11:27

Alex

7,9893 gold badges48 silver badges61 bronze badges

answered Jul 30, 2014 at 11:13

ivarni

17.9k17 gold badges79 silver badges94 bronze badges

3 Comments

Alex Over a year ago

Actually, this is not what ng-init is for. The "special properties" referred to are $index, $even etc, which are overridden in nested ng-repeat directives - hence, you may need to alias them.

ivarni Over a year ago

@AlexG On second read-through, it seems I misunderstood the docs the first time I read it. I would still argue that this is an acceptable use of ng-init though and by far the least verbose way of solving this case.

Alex Over a year ago

I agree it does work for this simple case and I am guilty of using it when I can't be bothered to write a controller or directive.

Alex · Accepted Answer · 2014-07-30 12:32:32Z

0

If you don't want to change the structure of your templates, you will need to change the structure of your data. Create a controller:

app.controller('BookOrMovieController', function($scope) {
    if ($scope.item.type == 'Book') {
        $scope.book = $scope.item.data;
    }
    if ($scope.item.type == 'Movie') {
        $scope.movie = $scope.item.data;
    }
});

Then instantiate the controller on the included template element:

<ul><li ng-repeat="item in items" ng-include="item.type+'.html'" ng-controller="BookOrMovieController"/></ul>

edited Jul 30, 2014 at 12:32

answered Jul 30, 2014 at 11:23

Alex

7,9893 gold badges48 silver badges61 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-include scope

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related