Unable to use multiple templates/controllers in same HTML

In an Angular app, I need to include A.html along with its controller in B.html without duplicating either A.html or AController.

I wrote the following in A.html but it didn't work

<div ng-include src="src/html/v1/A.html"></div>

Following is the app's code structure

src
??? html
?   ??? v1
?   ?   ??? A.html
?   ?   ??? B.html
??? index.coffee
??? index.html
??? js
?   ??? controllers
?   ?   ??? v1
?   ?   ?   ??? AController.js
|   ?   ?   ??? BController.js
??? sass
    ??? v1

Following is what index.coffee contains -

 $routeProvider
    .when("/",
      {
        templateUrl: "src/html/v1/A.html",
        title: "A"
        controller: "AController"
      })
    .when("/A",
      {
        templateUrl: "src/html/v1/A.html",
        title: "A"
        controller: "AController"
      })
    .when("/B",
      {
        templateUrl: "src/html/v1/B.html",
        title: "B"
        controller: "BController"
      })
    .otherwise({ redirectTo: "/" })

Please suggest what am I missing here.

PS: The answer to this question may be answer to many other similar questions but I couldn't find the answer at first instance. The upvotes to this question clearly tells that it holds relevance.

Answers:

Answer

The src attribute for ng-include accepts an string. So change it to:

<div ng-include src="'src/html/v1/A.html'"></div>

From the docs:

angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. src="'myPartialTemplate.html'".

Answer

It should be <div ng-include src="'src/html/v1/A.html'"></div>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.