ไวยากรณ์ที่ถูกต้องของ ng-include คืออะไร?

398

ฉันพยายามที่จะรวมตัวอย่าง HTML ภายในng-repeatแต่ฉันไม่สามารถรวมถึงการทำงาน ดูเหมือนว่าไวยากรณ์ปัจจุบันของng-includeจะแตกต่างจากก่อนหน้านี้: ฉันเห็นตัวอย่างมากมายที่ใช้

<div ng-include src="path/file.html"></div>

แต่ในเอกสารอย่างเป็นทางการมันบอกว่าจะใช้

<div ng-include="path/file.html"></div>

แต่จากนั้นลงหน้ามันจะแสดงเป็น

<div ng-include src="path/file.html"></div>

ไม่ว่าฉันจะพยายาม

<div ng-include="views/sidepanel.html"></div>

<div ng-include src="views/sidepanel.html"></div>

<ng-include src="views/sidepanel.html"></ng-include>

<ng-include="views/sidepanel.html"></ng-include>

<ng:include src="views/sidepanel.html"></ng:include>

ตัวอย่างของฉันไม่ได้เป็นโค้ดมากนัก แต่ก็มีหลายอย่างเกิดขึ้น ฉันอ่านในโหลดเทมเพลตแบบไดนามิกภายในng-repeatที่อาจทำให้เกิดปัญหาดังนั้นฉันแทนที่เนื้อหาsidepanel.htmlด้วยคำเพียง แต่fooยังคงไม่มีอะไร

ฉันพยายามประกาศแม่แบบโดยตรงในหน้านี้:

<script type="text/ng-template" id="tmpl">
    foo
</script>

และทำงานผ่านทุกรูปแบบของng-includeการอ้างอิงของสคริปต์idและยังคงไม่มีอะไร

หน้าของฉันมีมากขึ้นในนั้น แต่ตอนนี้ฉันได้ถอดมันลงไปเพียงแค่นี้:

<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
    <!-- views/main.html -->
    <header>
        <h2>Blah</h2>
    </header>
    <article id="sidepanel">
        <section class="panel"> <!-- will have ng-repeat="panel in panels" -->
            <div ng-include src="views/sidepanel.html"></div>
        </section>
    </article>
<!-- index.html -->
</body>
</html>

ส่วนหัวแสดงผล แต่เทมเพลตของฉันไม่แสดง ฉันไม่ได้รับข้อผิดพลาดในคอนโซลหรือจากโหนดและถ้าฉันคลิกลิงก์ในsrc="views/sidepanel.html"เครื่องมือ dev มันจะพาฉันไปยังเทมเพลตของฉัน (และแสดงfoo)

— jacob
แหล่งที่มา

775

คุณต้องพูดsrcสตริงของคุณภายในเครื่องหมายคำพูดคู่:

<div ng-include src="'views/sidepanel.html'"></div>

แหล่ง

— jacob
แหล่งที่มา

4

ใช่วันนี้ฉันจะกัดฉันอีกครั้ง ที่เกี่ยวข้องบ้างคำตอบstackoverflow.com/questions/13811948/...

— ไจ

60

เหตุผลของเรื่องนี้คือสตริงใด ๆ ในแท็ก ng นั้นถูกประเมินเป็นนิพจน์เชิงมุม '' บอกว่าเป็นนิพจน์สตริง

— Gepsens

37

@Gepsens: มันสมเหตุสมผลเมื่อคุณรู้ มันจะดีถ้าเอกสารที่กล่าวถึงมันชัดเจนว่า

— jacob

1

ใช่ตอนนี้ฉันรู้ว่าทำไมพวกเขาพูดว่า "สตริง" ... ขอบคุณ + jacob สำหรับการค้นหา

— Shadoweb

7

ฉันเห็นด้วยเราต้องการความพยายามด้านเอกสารใน Angular และระบบเค้าโครง

— Gepsens

134

    <ng-include src="'views/sidepanel.html'"></ng-include>

หรือ

    <div ng-include="'views/sidepanel.html'"></div>

หรือ

    <div ng-include src="'views/sidepanel.html'"></div>

สิ่งที่ต้องจำ:

-> ไม่มีช่องว่างใน src

-> อย่าลืมใช้อัญประกาศคู่ในเครื่องหมายคำพูดคู่สำหรับ src

— Kalpesh Prajapati
แหล่งที่มา

8

ng-include="'...'"ไวยากรณ์แน่นอนดูดีกว่า

— Pier-Luc Gendreau

ดังนั้นฉันสมมติว่า ng-include ไม่มีอยู่ในรูปแบบความคิดเห็นหรือไม่

— OzzyTheGiant

50

สำหรับการแก้ปัญหาเหล่านั้นสิ่งสำคัญคือต้องรู้ว่า ng-include ต้องใช้พา ธ url จากไดเรกทอรีรากของแอปไม่ใช่จากไดเรกทอรีเดียวกันกับที่ (ในขณะที่ partial.html เป็นไฟล์มุมมองที่สามารถพบแท็กมาร์คอัปแบบอินไลน์ ng-include

ตัวอย่างเช่น:

ถูกต้อง: div ng-include src = "'/views/partials/tabSlides/add-more.html'">

ไม่ถูกต้อง: div ng-include src = "'add-more.html'">

— Benjamin McFerren
แหล่งที่มา

6

ที่จริงแล้วสิ่งนี้ไม่ถูกต้อง: พา ธ สามารถสัมพันธ์ได้ แต่มันสัมพันธ์กับไฟล์ html ที่แอปมีอินสแตนซ์ ในของคุณเช่น "ไม่ถูกต้อง" ที่จะทำงานถ้าอยู่ในไดเรกทอรีเดียวกันกับadd-more.html app.htmlในคำตอบของฉันอยู่ในไดเรกทอรีเดียวกันกับviews/ app.html

— jacob

ในกรณีที่มี Laravel และวางโครงสร้างในโฟลเดอร์สาธารณะ (สาธารณะ / แอพ / แม่แบบ / รวม) และไฟล์การโทรคือ (สาธารณะ / แอพ / แม่แบบ / index.php) เส้นทางรวมที่จำเป็นต้องใช้ (app / แม่แบบ / รวม /filetoinclude.php) ฉันไม่สามารถทำงานได้

— Jason Spick

10

สำหรับผู้ที่กำลังมองหาวิธีแก้ปัญหา "item renderer" ที่สั้นที่สุดจากบางส่วนดังนั้นคอมโบของ ng-repeat และ ng-include :

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />

ที่จริงแล้วถ้าคุณใช้มันแบบนี้กับ repeater หนึ่งตัวมันก็ใช้งานได้ แต่จะไม่ใช้ 2 ตัว! Angular (v1.2.16) จะประหลาดด้วยเหตุผลบางอย่างถ้าคุณมี 2 อันต่อกันดังนั้นจึงปลอดภัยกว่าที่จะปิด div ด้วยวิธี pre-xhtml:

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>

— สมดุล
แหล่งที่มา

นี้เป็นปีต่อมา <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>แต่นี่คือสิ่งที่ฉันต้องการสำหรับการทำงานใน ขอบคุณ!

— Eric D. Johnson

9

บางทีนี่อาจเป็นประโยชน์สำหรับผู้เริ่มต้น

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="custom.css">
  </head>
  <body>
    <div ng-include src="'view/01.html'"></div>
    <div ng-include src="'view/02.html'"></div>
    <script src="angular.min.js"></script>
  </body>
</html>

— BG Bruno
แหล่งที่มา

7

สิ่งนี้ใช้ได้กับฉัน:

ng-include src="'views/templates/drivingskills.html'"

div ที่สมบูรณ์:

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>

— ลิ่วล้อ
แหล่งที่มา

2

คุณไม่ควรรวมng-viewและng-inclueองค์ประกอบเดียวกัน src (ดูtemplateUrl ) ควรได้รับการกำหนดค่าในเราเตอร์ของคุณ

— jacob

@jacob คุณจะโหลดมันเป็นเส้นทางได้อย่างไร? เพราะฉันสามารถรับมุมมองของฉันในการโหลดและฉันสามารถทำให้ตัวควบคุมของฉันทำงานได้ แต่พวกมันไม่ได้เชื่อมต่อให้ดูโหลดที่ว่างเปล่า

— Sonic Soul

@SonicSoul ใช้ ngRouter และตั้งเป็นเทมเพลต หรือถ้าคุณหมายถึง params ใช้เส้นทางในเส้นทางเพียงแค่ใช้มันเหมือนการแสดงออก JavaScript:someVar + 'some string'

— jacob

@jacob ฉันใช้ ngRouter แล้ว แต่ฉันไม่รู้วิธีโหลดเส้นทางใน ng-include .. ถ้าฉันใช้เส้นทางใน src = มันโหลดไซต์ทั้งหมดไม่ใช่แค่มุมมอง :( ถ้าฉันโหลดโดยเส้นทางที่สัมพันธ์กันไป html จะไม่โหลดคอนโทรลเลอร์พร้อมมุมมอง

— Sonic Soul

@SonicSoul คุณกำลังพยายามโหลดเทมเพลตซ้อนในมุมมองที่โหลดผ่าน ngRouter หรือไม่ ถ้าเป็นเช่นนั้นฉันคิดว่าค่าที่คุณให้กับ src ควรเป็นเส้นทางที่สมบูรณ์ในโครงสร้างไดเรกทอรีของโครงการของคุณ (ไม่ใช่เส้นทางของแอป) หากคุณพยายามตั้งค่าเทมเพลตเส้นทางโดยใช้ ngInclude แสดงว่าผิด นอกจากนั้นเมื่อ 6 ปีที่แล้วและฉันไม่ได้ใช้ AngularJS มานานกว่า 3 ปี

— jacob

0

ลองนี้

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <div ng-include="'myTable.htm'"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>

— jayaweb
แหล่งที่มา

-1

บน ng-build เกิดข้อผิดพลาดไม่พบไฟล์ (404) ดังนั้นเราสามารถใช้รหัสด้านล่าง

<ng-include src="'views/transaction/test.html'"></ng-include>

ติดตั้งจาก

<div ng-include="'views/transaction/test.html'"></div>

— Rohit Parte
แหล่งที่มา