Angular内联模板404在drupal页面中找不到

Angular inline template 404 not found in drupal page

本文关键字:drupal 找不到 Angular      更新时间:2023-09-26

我正在drupal 7页面中提供一个angular路由器。同样的例子在这里也可以正常工作:http://jsfiddle.net/laurencefass/Lsu8p124/.

<script type="text/ng-template" id="embedded.home.html">
  <h1> Home </h1>
</script>
<script type="text/ng-template" id="embedded.about.html">
  <h1> About </h1>
</script>
<div ng-app="routerApp"> 
  <div id="navigation">  
  <a href="#/home">Home</a>
  <a href="#/about">About</a>
  </div>
  <div ng-view></div>
</div>
Javascript

var app=angular.module('routerApp', ['ngRoute']);
app.controller('HomeController', function ($scope) {});
app.controller('AboutController', function ($scope) {});
app.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
       templateUrl: "embedded.home.html",
       controller: 'HomeController'
    }).
    when('/about', {
       templateUrl: 'embedded.about.html',
       controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
我得到以下运行时错误:

"Error: [$compile: tload] Failed to load template: embedded.home .html (HTTP status: 404 Not Found) "http://errors.angularjs.org/1.5.0-beta.1/编译/tpload美元? p0 = embedded.home1.html& p1 = 404, p2 = % 20发现minErr/& lt; @https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 68:5handleError@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 17751:1processQueue@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 14814:11scheduleProcessQueue/& lt; @https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 14830:27RootScopeProvider/这。gethttps美元://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 16058:9RootScopeProvider/这。gethttps美元://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 15869:15RootScopeProvider/这。gethttps美元://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 16166:13done@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 10607:36completeRequest@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 10805:7requestLoaded@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js ? nwma5b: 10750:1

这些脚本需要放在ng-appdiv中,这样内联脚本才能正常工作,否则angular会寻找一个文件。不是最好的实现,也没有明显的文档,但它适用于测试目的。在Angular中使用内联模板