Search code examples
angularjsangularjs-ng-include

ng-include with ng-init oddity

I created an inline template like so

<script type="text/ng-template" id="/deviceResultsContainer.html">
    {{resultListTitle}}
</script>

If I use it like so

<div ng-include="'/deviceResultsContainer.html'" ng-init="resultListTitle = 'Errors'"></div>
<div ng-include="'/deviceResultsContainer.html'" ng-init="resultListTitle = 'Warnings'"></div>

My output is

Warnings

Warnings

Why would it be listed like this, as opposed to what I'd expect:

Errors

Warnings

Solution

  • Because the $scope value resultListTitle is being set to 'Warnings' last. They are technically both looking at the same value.

    I think what you are looking for you probably want to have a directive with isolated $scope.

    If you would do the following:

    <div ng-include="'/deviceResultsContainer.html'" ng-init="resultListTitle = 'Errors'"></div>
<div ng-include="'/deviceResultsContainer.html'"></div>

    You would see this:

    Errors

    Errors