未加载 Angular 指令 templateURL.为什么?

问题描述

我在 Angular 中创建了一个指令.当我使用 template 属性时，指令编译".使用 templateURL 时不会编译.

templateURL 文件在 angular 页面的控制台或网络选项卡中没有 404.作为浏览器 URL 为 200.

我错过了什么?

'use strict';angular.module('mean.profile').directive('inProfileSidebar', function() {返回 {限制:'A'，范围: {数据:'='，可'='，},模板:'<div><h2>inProfileNarrow</h2><div>{{data}}</div><div>{{editable}}</div></div>',//templateURL: '/profile/views/inProfileSidebar.html',};});

我的应用程序的 URL 是:http://localhost:3000/#!/profile/这个 URL 是 200:http://localhost:3000/profile/views/inProfileSidebar.html

inProfileSidebar.html

<h2>inProfileNarrow</h2><div>{{数据}}</div><div>{{editable}}</div>

在此 HTML 中使用:

<div in-profile-sidebar data="data.profile" editable="data.profile.editable"></div>

我在浏览器控制台中没有看到任何错误，浏览器的网络日志中也没有对 templateURL 的请求.

它在我使用 template 时有效，但在使用 templateURL 时无效.为什么?

解决方案

我没有测试它，但从快速浏览来看，您似乎错误地命名了该属性.

它应该是templateUrl"，而不是templateURL"(只有U"是大写的).

I've created a directive in Angular. The directive 'compiles' when I use the template attribute. It doesn't compile in when using templateURL.

The templateURL file doesn't 404 in angular page's console or network tab. It is 200 as a browser URL.

What am I missing?

'use strict';

angular.module('mean.profile').directive('inProfileSidebar', function() {
  return {
    restrict: 'A',
    scope: {
      data: '=',
      editable: '=',
    },
    template: '<div><h2>inProfileNarrow</h2><div>{{data}}</div><div>{{editable}}</div></div>',
//    templateURL: '/profile/views/inProfileSidebar.html',
  };
});

My app's URL is: http://localhost:3000/#!/profile/This URL is 200: http://localhost:3000/profile/views/inProfileSidebar.html

inProfileSidebar.html

<div>
  <h2>inProfileNarrow</h2>
  <div>{{data}}</div>
  <div>{{editable}}</div>
</div>

Used in this HTML:

<div class="col-md-4">
  <div in-profile-sidebar data="data.profile" editable="data.profile.editable"></div>
</div>

I don't see any errors in the browser console, and there is no request to the templateURL in the browser's network log.

It works when I use template, but not with templateURL. Why?

解决方案

I didnt test it, but from a quick look it seems you named the property incorrectly.

It should be 'templateUrl', NOT 'templateURL' (only the 'U' is uppercase).

这篇关于未加载 Angular 指令 templateURL.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！