단순 ng-include가 작동하지 않음
Angular와 놀고 있습니다.JS는 처음이라 머리글과 바닥글에 ng-include를 사용하는 데 어려움을 겪고 있습니다.
여기 내 트리가 있다.
myApp
assets
- CSS
- js
- controllers
- vendor
- angular.js
- route.js
......
......
......
main.js
pages
- partials
- structure
header.html
navigation.html
footer.html
index.html
home.html
index.syslog:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Test</title>
<script src="/assets/js/vendor/angular.js"></script>
<script src="/assets/js/vendor/route.js"></script>
<script src="/assets/js/vendor/resource.js"></script>
<script src="/assets/js/main.js"></script>
</head>
<body>
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
</body>
</html>
main.discloss.main.discloss.
var app = angular.module("app", ["ngResource", "ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/login", {
templateUrl: "login.html",
controller: "LoginController"
});
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
});
$routeProvider.otherwise({ redirectTo: '/home'});
});
app.controller("HomeController", function($scope) {
$scope.title = "Home";
});
home.displaces.displaces
<div>
<p>Welcome to the {{ title }} Page</p>
</div>
home.html 페이지로 이동해도 헤더, 네비게이션 및 바닥글이 표시되지 않습니다.
header.html 대신 include header.url을 사용하고 있습니다.src 속성에 리터럴을 사용하는 것처럼 보이므로 @DRiFTy의 코멘트에서 설명한 바와 같이 따옴표로 둘러싸야 합니다.
바꾸다
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
로.
<div ng-include src="'partials/structure/header.html'"></div>
<div ng-include src="'partials/structure/navigation.html'"></div>
<div id="view" ng-view></div>
<div ng-include src="'partials/structure/footer.html'"></div>
이것이 동작하지 않으면 브라우저 콘솔에 404가 있는지 확인합니다.
단순한 ng-include 렌더링에 대해서도 비슷한 문제가 있었습니다.
<div ng-include="views/footer.html"></div>
파일 경로를 작은 따옴표로 묶었더니 다음과 같이 렌더링됩니다.
<div ng-include="'views/footer.html'"></div>
저도 비슷한 문제가 있어서 여기까지 왔어요.
ng-include부분적인 내용은 입력되지 않았지만 콘솔 오류나 404 오류는 없었습니다.
내가 뭘 했는지 깨달았어
수정: 반드시 다음 절차를 따르세요.ng-app을 벗어나서ng-include너무 뻔해!앵귤러 누브에 대한 대가.
저도 이 문제를 발견했어요.그리고 이것이 나에게 효과가 있었다.
이 글을 쓰는 대신:<div ng-include="'html/form.htm'"></div>
추가하다ng-app=""다음과 같이 표시됩니다.<div ng-app="" ng-include="'html/form.htm'"></div>
저는 같은 문제로 고민하고 있었고, 다른 스택에서 조언받은 것을 거의 다 했지만, 그것은 제게는 효과가 없었습니다.콘솔에서 다음 오류가 발생하였습니다.
"크로스 오리진 요청은 프로토콜 구성(http, data, chrome, chrome-extension, https, chrome-extension-resource)에서만 지원됩니다."
나중에 깨달은 것은 로컬 웹 서버(MAMP, WAMP 등)를 사용하여 작동해야 한다는 것입니다.
위의 에러 메시지에 주의해 주세요.웹 사이트를 실행하기 위해 로컬 웹 서버를 사용하지 않을 수 있습니다.
내가 방금 알아냈어!
저는 CDN을 사용하여 angular.min.js 파일을 Import하고 있었습니다만, 정상적으로 동작하지 않았던 것 같습니다.전환처:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
포함ng-app=""내 바디 태그에:
<body ng-app="">
<div ng-include="'testfile.html'"></div>
지금은 잘 되고 있어요.건배!
네, 없습니다.'', ng는 내부 내용을 평가하려고 합니다.ng-include("")
이 평가도 이 문제를 해결하지 않는 또 다른 이유입니다.{{}}이 명령어 안에 있습니다.
ng-include는 탐색기뿐만 아니라 크롬에서도 동작하지 않지만 Firefox에서도 동작하기 때문에 호환성 문제일 수 있습니다.Firefox, Edge 또는 다른 브라우저에서 보고서를 생성해 보십시오.
I Too도 비슷한 문제가 있었습니다.어리석은 실수가 IT의 원인이었습니다.아래의 텍스트 영역 EG:
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" > `
올바르게 닫히지 않았습니다.아래에서 수정:
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" ></textarea>
<div ng-switch="vm.frmDOA.isGenerateDebitNote">
<ng-include src="vm.showupload()"></ng-include>
</div>
투고하는 것이, 몇시간 동안 파헤친 사람에게 도움이 될 것 같아서….
ng-mybsite 파일은 웹 서버에서 가져온 파일(http://mywebsite/myinclude.dlink 등)에만 사용할 수 있습니다.로컬 폴더에서 직접 파일을 가져오면 작동하지 않습니다(c:\myinclude.html은 작동하지 않습니다).
ng-include 디렉티브는 (file:///yourpath/index.html)와 같이 파일 시스템 아래에서 직접 파일을 표시하지 않고 특정 서버(로컬 호스트 또는 온라인)를 통해 파일을 표시하는 경우 정상적으로 작동합니다.
w3schools의 이 예는 정상적으로 동작할 것입니다.
언급URL : https://stackoverflow.com/questions/22991658/simple-ng-include-not-working
'bestsource' 카테고리의 다른 글
| 에이잭스된 콘텐츠에서 모든 (스크립트/함수) 강제 재실행 (0) | 2023.04.04 |
|---|---|
| jQuery에서 React.js로 전환하는 방법 (0) | 2023.04.04 |
| 파일 또는 어셈블리 "시스템"을 로드할 수 없습니다.Net.Http, 버전=4.0.0, 문화=중립, 공개키토큰=b03f5f7f11d50a3a" (0) | 2023.04.04 |
| 에러, 「put(K, V)」를 raw 타입의 「java.util」의 멤버로서 오프 콜.해시맵' (0) | 2023.04.04 |
| 참조 콩을 유형별로 목록에 자동 연결 (0) | 2023.04.04 |