Angular directive templateUrl not working

Question

This is my code so far, to return a view in browser via Angular custom directive, using @html.partialview

var newOne = function () {
    return {
        restrict: "A",
        templateUrl: "newone.html",
        replace: true,
        scope: {},
        controller: ['$scope', function ($scope) {
            }]
    }
}

I declare the id "newone.html" here:

<script type="text/ng-template" id="newone.html">
            @Html.Partial("~/Views/AngularTemplates/Newone.cshtml")
        </script>

and ofcourse I call the directive from the html:

<div data-new-one></div>

Unfortunately I do not get the appropriate response. All I get is an error message(console inspector): [$compile:tpload] Failed to load template: newone.html

I tried to store the .cshtml in multiple folders, or even load it from bundleconfig... But nothing! Any ideas? Thank you!

Put that template in a HTML file or use the templateCache module. — yBrodsky
– yBrodsky, Commented May 4, 2016 at 19:12
First, it sounds like @html.partial is an ASP.NET command so you should add that as a tag in your question. Also, you should check the developer console and ensure that the <script> with the HTML is actually being loaded by ASP.NET. If it's blank or if ASP.NET is giving an error message, that's your problem. — Dr. Cool
– Dr. Cool, Commented May 4, 2016 at 19:12

Dr. Cool · Accepted Answer · 2016-05-04 19:14:23Z

1

You shouldn't need to use the @Html.Partial.

Try changing your directive code to this:

var newOne = function () {
    return {
        restrict: "A",
        templateUrl: "~/Views/AngularTemplates/Newone.cshtml",
        replace: true,
        scope: {},
        controller: ['$scope', function ($scope) {
            }]
    }
}

answered May 4, 2016 at 19:14

Dr. Cool

3,7213 gold badges25 silver badges26 bronze badges

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

1 Comment

Georgios Over a year ago

Thank you but unfortunately this didn't work. I don't get the error any more but neither the appropriate view returns as well.

pableiros · Accepted Answer · 2016-08-26 17:30:24Z

0

Create a new file name named:

~/Views/AngularTemplates/Newone.**tpl**.cshtml

Just copy and past contents of old file into new tpl.html file adding tpl(template) before the cshtml or html

Example:

stuff.tpl.html

edited Aug 26, 2016 at 17:30

pableiros

16.3k12 gold badges108 silver badges111 bronze badges

answered Aug 26, 2016 at 16:40

Daniel Medina

441 silver badge8 bronze badges

Comments

Pang · Accepted Answer · 2017-04-01 03:37:27Z

0

Found the solution in Angular documentation:
https://docs.angularjs.org/error/$compile/tplrt which says:

the template must have exactly one root element

Seems that multiple <div> tags or even comments are getting the error.

edited Apr 1, 2017 at 3:37

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered May 5, 2016 at 8:40

Georgios

1,4836 gold badges17 silver badges35 bronze badges

Comments

Milad Mohamadi · Accepted Answer · 2020-04-25 08:21:23Z

0

You can import template in the script and use it as a "template", not "templateUrl":

import newone from 'newone.html';
var newOne = function () {
return {
    restrict: "A",
    template: newone,
    replace: true,
    scope: {},
    controller: ['$scope', function ($scope) {
        }]
      }
    }

answered Apr 25, 2020 at 8:21

Milad Mohamadi

1351 silver badge10 bronze badges

Collectives™ on Stack Overflow

Angular directive templateUrl not working

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related