[javascript] ng-include의 올바른 구문은 무엇입니까?

에 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.



답변

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

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

출처


답변

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


답변

이러한 문제 해결을 위해서는 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'”>


답변

부분적으로 가능한 가장 짧은 “아이템 렌더러”솔루션을 찾는 사람들을 위해 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>


답변

어쩌면 초보자에게 도움이 될 것입니다.

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


답변

이것은 나를 위해 일했다 :

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

완전한 사업부 :

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


답변

이 시도

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