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"개발자 도구에서 링크를 클릭하면 템플릿으로 이동하고 표시됩니다 foo.

— 야곱
소스

775

src큰 따옴표 안에 문자열 을 작은 따옴표로 묶어야합니다.

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

출처

— 야곱
소스

4

그렇습니다, 이것은 다른 날에 저를 물었습니다. 다소 관련 답변 stackoverflow.com/questions/13811948/…

— jaime

60

그 이유는 ng 태그의 문자열이 실제로 각도 표현식으로 평가되기 때문입니다. ''는 그것이 문자열 표현식이라는 것을 알려줍니다.

— Gepsens 2012

37

@Gepsens : 일단 알면 이해가됩니다. 문서에서 명시 적으로 언급하면 좋을 것입니다.

— jacob

1

그래, 이제 왜 그들이 "문자열"이라고 말하는지 알아 .. 찾아

— 줘서

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에 대해 큰 따옴표로 작은 따옴표를 사용해야합니다

— 칼 페시 프라자 파티
소스

8

ng-include="'...'"구문은 확실히 잘 보인다.

— Pier-Luc Gendreau

ng-include가 주석 형식으로 존재하지 않는다고 가정합니다.

— OzzyTheGiant

50

이러한 문제 해결을 위해서는 ng-include에 url 경로가 partial.html이있는 동일한 디렉토리가 아니라 앱 루트 디렉토리에 있어야한다는 것을 알아야합니다. partial.html은 인라인 ng-include 마크 업 태그를 찾을 수있는보기 파일입니다.

예를 들면 다음과 같습니다.

올바른 : div ng-include src = " '/views/partials/tabSlides/add-more.html'">

잘못됨 : div ng-include src = " 'add-more.html'">

— 벤자민 맥 페렌
소스

6

실제로 이것은 정확하지 않습니다. 경로는 상대 경로 일 수 있지만 앱이 인스턴스화 된 html 파일과 관련이 있습니다. "올바르지 않은"예 add-more.html에서와 같은 디렉토리에 있으면 작동합니다 app.html. 내 대답 views/에와 같은 디렉토리에 있습니다 app.html.

— jacob

Laravel의 경우 구조를 공용 폴더 (public / app / templates / includes)에 배치하고 호출 파일이 (public / app / templates / index.php) 인 경우 포함 경로는 (app / templates / includes) /filetoinclude.php). 나는 직장에 친척을 가질 수 없었다.

— Jason Spick

10

부분적으로 가능한 가장 짧은 "아이템 렌더러"솔루션을 찾는 사람들을 위해 ng-repeat와 ng-include의 조합 :

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

실제로, 하나의 리피터에 대해 이와 같이 사용하면 작동하지만 2 개는 작동하지 않습니다! Angular (v1.2.16)는 어떤 이유로 든이 두 가지를 차례로 가지고 있다면 어떤 이유로 든 놀랄 것입니다. 따라서 div를 사전 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 브루노
소스

7

이것은 나를 위해 일했다 :

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

완전한 사업부 :

<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를 사용하여 템플릿으로 설정합니다. 또는 경로에서 경로 매개 변수를 사용하려는 경우 JavaScript 표현식처럼 사용하십시오.someVar + 'some string'

— jacob

@ jacob 나는 이미 ngRouter를 사용하고 있지만 ng-include에서 해당 경로를로드하는 방법을 모르겠습니다 .. src =에서 경로를 사용하면보기뿐만 아니라 전체 사이트를로드합니다 html, 그것은보기와 컨트롤러를로드하지 않습니다

— 소닉 소울

@SonicSoul ngRouter를 통해로드되는보기에 중첩 된 템플릿을로드하려고합니까? 그렇다면 src에 제공하는 값은 프로젝트의 디렉토리 구조 (앱 경로가 아닌)의 절대 경로 여야한다고 생각합니다. ngInclude를 사용하여 경로 템플릿을 설정하려고하면 잘못되었습니다. 그 외에도 6 년 전이었고 아마도 3 년 이상 AngularJS를 사용하지 않았습니다.

— 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>

— 자야 웹
소스

-1

ng-build에서 파일을 찾을 수 없음 (404) 오류가 발생합니다. 아래 코드를 사용할 수 있습니다

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

대신해서,

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

— 로 히트 파테
소스