एनजी शामिल का सही सिंटैक्स क्या है?

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"देव टूल्स में लिंक पर क्लिक करता हूं , तो यह मुझे मेरे टेम्पलेट पर ले जाता है (और प्रदर्शित करता है foo)।

— याकूब
स्रोत

775

आपको srcदोहरे उद्धरण चिह्नों के अंदर अपनी स्ट्रिंग को उद्धृत करना होगा:

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

स्रोत

— याकूब
स्रोत

4

हाँ, यह मुझे दूसरे दिन। कुछ हद तक संबंधित जवाब stackoverflow.com/questions/13811948/…

— jaime

60

इसका कारण यह है कि एनजी टैग में कोई भी स्ट्रिंग वास्तव में एक कोणीय अभिव्यक्ति के रूप में मूल्यांकन की जाती है। '' यह बताता है कि यह एक स्ट्रिंग अभिव्यक्ति है।

— गेपसेन

37

@Gepsens: एक बार पता चलने पर यह समझ में आता है। यह अच्छा होगा यदि दस्तावेज़ीकरण ने इसका उल्लेख किया है, हालांकि यह स्पष्टता है।

— जेकब

1

हाँ अब मुझे पता है कि वे "स्ट्रिंग" क्यों कहते हैं ... धन्यवाद +

— जेकब

7

मैं सहमत हूं, हमें निश्चित रूप से कोणीय और एक लेआउट सिस्टम पर प्रलेखन प्रयास की आवश्यकता है।

— 21

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 के लिए दोहरे उद्धरण में एकल उद्धरण का उपयोग करना याद रखें

— कल्पेश प्रजापति
स्रोत

8

ng-include="'...'"वाक्य रचना निश्चित रूप से बेहतर लग रहा है।

— पियर-ल्यूक गेंड्रेउ

तो मैं एनजी शामिल मान रहा हूँ टिप्पणी प्रारूप में मौजूद नहीं है?

— ओजैनीजेंट

50

शूटिंग में परेशानी करने वालों के लिए, यह जानना जरूरी है कि एनजी-एप में एप रूट निर्देशिका से होने के लिए url पथ की आवश्यकता होती है न कि उसी निर्देशिका से जहां आंशिक html रहती है। (जबकि आंशिक.html दृश्य फ़ाइल है जो इनलाइन एनजी-शामिल मार्कअप टैग पाया जा सकता है)।

उदाहरण के लिए:

सही: div ng-src = "'/views/partials/tabSlides/add-more.html'"> शामिल करें

गलत: div ng-src = "'add-more.html'"> शामिल करें

— बेंजामिन मैकफेरेन
स्रोत

6

वास्तव में, यह बिल्कुल सही नहीं है: पथ सापेक्ष हो सकता है, लेकिन यह HTML फ़ाइल के सापेक्ष है जहां से ऐप को त्वरित किया गया था। आपके "गलत" उदाहरण में, यदि add-more.htmlवह उसी निर्देशिका में है तो काम करेगा app.html। मेरे जवाब में, views/के रूप में एक ही निर्देशिका में है app.html।

— याकूब २१'१३ को

लारवेल के साथ मामले में और संरचना को सार्वजनिक फ़ोल्डर (सार्वजनिक / एप्लिकेशन / टेम्प्लेट / शामिल) में शामिल करना और कॉलिंग फ़ाइल (सार्वजनिक / एप्लिकेशन / टेम्प्लेट / इंडेक्स। एफपीपी) शामिल होने के लिए आवश्यक पथ (ऐप / टेम्प्लेट / शामिल हैं) /filetoinclude.php)। मुझे काम के सापेक्ष नहीं मिल सकता था।

— जेसन स्पिक

10

उन लोगों के लिए जो आंशिक से कम से कम "आइटम रेंडरर" समाधान की तलाश कर रहे हैं, इसलिए एनजी-रिपीट और एनजी-कॉम्बो का एक कॉम्बो :

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

वास्तव में, यदि आप इसे एक पुनरावर्तक के लिए उपयोग करते हैं, तो यह काम करेगा, लेकिन उनमें से 2 के लिए नहीं होगा! कोणीय (v1.2.16) किसी कारण से बाहर निकल जाएगा यदि आपके पास इनमें से 2 एक के बाद एक हैं, तो यह पूर्व-एक्सएचटीएमएल तरीके को बंद करने के लिए सुरक्षित है:

<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>। धन्यवाद!

— एरिक डी। जॉनसन

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>

— बीजी ब्रूनो
स्रोत

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 ( टेम्पलेट टेम्पलेट देखें ) कॉन्फ़िगर किया जाना चाहिए।

— जेकब

@jacob तो आप इसे एक मार्ग के रूप में कैसे लोड करेंगे ?? क्योंकि मैं लोड करने के लिए अपना विचार प्राप्त कर सकता हूं, और मैं अपने नियंत्रक को ट्रिगर करने के लिए प्राप्त कर सकता हूं, लेकिन वे कनेक्ट नहीं हैं, खाली लोड देखें

— ध्वनि आत्मा

@SonicSoul एनकाउंटर का उपयोग करें और इसे टेम्पलेट के रूप में सेट करें। या यदि आप मार्ग में मार्ग परिमों का उपयोग करते हैं, तो इसका उपयोग जावास्क्रिप्ट अभिव्यक्ति की तरह करें:someVar + 'some string'

— जेकोब

@jacob मैं पहले से ही ngRouter का उपयोग करता हूं, लेकिन मुझे पता नहीं है कि उस मार्ग को एनजी-लोड में कैसे शामिल किया जाए .. अगर मैं src में एक मार्ग का उपयोग करता हूं = यह सिर्फ पूरी साइट को लोड करता है न कि केवल दृश्य :( अगर मैं इसे सापेक्ष पथ द्वारा लोड करता हूं html, यह नियंत्रक को दृश्य के साथ लोड नहीं करता है

— ध्वनि आत्मा

@SonicSoul क्या आप एक ऐसे दृश्य में नेस्टेड को लोड करने की कोशिश कर रहे हैं जो ngRouter के माध्यम से लोड हो रहा है? यदि ऐसा है, तो मुझे लगता है कि आपके द्वारा प्रदान की जाने वाली वैल्यू आपके प्रोजेक्ट की डायरेक्टरी स्ट्रक्चर (ऐप रूट नहीं) में एक पूर्ण पथ होनी चाहिए। यदि आप ngInclude का उपयोग करके रूट टेम्पलेट सेट करने का प्रयास कर रहे हैं, तो यह गलत है। इसके अलावा, यह 6 साल पहले था, और मैंने शायद 3+ वर्षों में AngularJS का उपयोग नहीं किया है।

— जेकब

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

एनजी-बिल्ड पर, फ़ाइल नहीं मिली (404) त्रुटि। इसलिए हम नीचे दिए गए कोड का उपयोग कर सकते हैं

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

इसके बजाए,

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

— रोहित परते
स्रोत