Issue with angular-based codepen not loading my inline templates using ng-include

Question

I am trying to load angular inline templates as follows:

<ng-include src="templateId"></ng-include>

Here is the inlined template:

<script type="text/ng-template" id="needs.html">
  <div class="form-group">
    <div class="col-lg-6">
      <div ng-repeat="need in needs" class="hidden-radios">
        <input type="radio" id="{{need}}" name="needs" ng-required="true" ng-model="advertisement.need" ng-value="need"/>
        <label for="{{need}}" class="col-lg-6">
          <span class="block-span">
            {{ need }}
          </span>
        </label>
      </div>
    </div>
  </div>
</script>

and the relevant portion from the controller:

 $scope.focusNeed = function(){
            console.log('focusNeed');
            $scope.templateId='needs.html';
        };

See codepen here: http://codepen.io/balteo/pen/ogBBXZ?editors=101

The issue I have is that the app tries to load the template by issuing request on the server instead of looking at the inline templates.

Can anyone please help?

Sergey Romanov · Accepted Answer · 2015-01-08 13:01:03Z

1

That is because your template is out of scope. Place <script type="text/ng-template" id="needs.html"> inside ng-app and it will work.

In real world ng-app is on the body. Butin codepen you cannot do that. That is why you'd better use plunker.

edited Jan 8, 2015 at 13:01

answered Jan 8, 2015 at 12:54

Sergey Romanov

3,0905 gold badges27 silver badges39 bronze badges

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

1 Comment

balteo Over a year ago

Spot on! Thanks Sergey!

Collectives™ on Stack Overflow

Issue with angular-based codepen not loading my inline templates using ng-include

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related