中使用内联模板

中使用内联模板

关注
发信
关注(28)粉丝(399)

在 AngularJS 中使用内联模板

本文介绍了在 AngularJS 中使用内联模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我将模板包装在 text/ng-template 类型的脚本标签中，并将 id 设置为 temp1.html.这是我的模块配置的样子

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

它告诉我 GET http://localhost:41685/temp1.html 404 (Not Found) 在我的控制台窗口中，这意味着它正在寻找具有该名称的文件.

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

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

<头><script src="/Scripts/angular.js"></script><link href="/Content/bootstrap.css" rel="stylesheet"/><身体><div class="容器"><h2>Angular 入门</h2><div class="row"><div class="panel" ng-app="LearningApp"><div ng-view></div>

<script type="text/ng-template" id="temp1.html"><div class="view"><h2>第一视图</h2><p>搜索:<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>

<script type="text/ng-template" id="temp2.​​html"><div class="view"><h2>第二个视图</h2><p>搜索:<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>

<script src="/Scripts/jquery-1.9.1.js"></script><script src="/Scripts/bootstrap.js"></script><script src="/Scripts/app/LearningApp.js"></script></html>

解决方案

Ody，你走对了，唯一的问题是标签在 outside DOM 元素，使用 code>ng-app 指令.如果您将其移动到 <body ng-app="LearningApp"> 元素内嵌模板应该可以工作.

您可能还会发现这个问题与此相关:有没有办法让 AngularJS 在开始而不是在需要时加载部分?

I wanted to load an inline view template.

I wrapped the template in a script tag of type text/ng-template and set the id to temp1.html. and here's what my module config looks like

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

It tells me GET http://localhost:41685/temp1.html 404 (Not Found) in my console window meaning that it's looking for a file of that name.

My Question is: How do I configure my routes to use inline templates?

Update: Here's what my server-rendered DOM looks like

<!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>
解决方案

Ody, you were on the right track, the only problem was that the tags are outside of the DOM element on which the ng-app directive is used. If you move it to the <body ng-app="LearningApp"> element in-line templates should work.

You might also find this question relevant: Is there a way to make AngularJS load partials in the beginning and not at when needed?

这篇关于在 AngularJS 中使用内联模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-15 20:29
Powered by LMLPHP ©2024 中使用内联模板 0.051089