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