首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在AngularJS中使用内联模板

在AngularJS中使用内联模板
EN

Stack Overflow用户
提问于 2013-04-21 04:18:04
回答 1查看 97.3K关注 0票数 82

我想加载一个内联视图模板。

我将模板包装在text/ng-template类型的脚本标记中,并将id设置为temp1.html。下面是我的模块配置

learningApp.config(function ($routeProvider) {
    $routeProvider
        .when("/first",{ controller: "SimpleController", templateUrl: "temp1.html"})
        .when("/second", {controller: "SimpleController", templateUrl: "temp2.html"})
        .otherwise({redirectTo : "/first"});
});

它在我的控制台窗口中告诉我GET http://localhost:41685/temp1.html 404 (Not Found),这意味着它正在查找同名的文件。

我的问题是:如何配置我的路由以使用内联模板?

更新:下面是我的服务器渲染的DOM的样子

<!DOCTYPE html>
<html>
<head>
    <script src="/Scripts/angular.js"></script>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">       
    <h2>Getting Started with Angular</h2>
    <div class="row">
        <div class="panel" ng-app="LearningApp">
            <div ng-view></div>
        </div>
    </div>

<script type="text/ng-template" id="temp1.html">
    <div class="view">
        <h2>First View</h2>
        <p>
            Search:<input type="text" ng-model="filterText" />
        </p>
        <ul class="nav nav-pills">
            <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href="#">{{cust.name}} - {{cust.school}}</a></li>
        </ul>
    </div>
</script>

<script type="text/ng-template" id="temp2.html">
    <div class="view">
        <h2>Second View</h2>
        <p>
           Search:<input type="text" ng-model="filterText" />
        </p>
        <ul class="nav nav-pills">
            <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href= "#">{{cust.name}} - {{cust.school}}</a></li>
        </ul>
    </div>
</script>
    </div>
    <script src="/Scripts/jquery-1.9.1.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/app/LearningApp.js"></script>
 </body>
</html>
EN

回答 1

Stack Overflow用户

发布于 2013-04-21 04:22:23

尝试使用script-Element的id属性来设置模板的名称。

<script type="text/ng-template" id="temp1.html">
   ... some template stuff
</script>
票数 33
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16124767

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档