간단한 ng-include가 작동하지 않습니다.
나는 AngularJS를 처음으로 가지고 놀았고 머리글과 바닥 글에 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.html :
<!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.js
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.html
<div>
<p>Welcome to the {{ title }} Page</p>
</div>
home.html 페이지로 이동할 때 머리글, 탐색 및 바닥 글이 나타나지 않습니다.
헤더를 포함하고 있습니다. 헤더 대신 url . html . 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 was not populating the contents of my partial, but there were no console errors, nor 404's.
then i realized what i did.
fix for me: make sure you have ng-app outside of the ng-include! so obvious. the price of being an Angular noob.
I also came across this issue. And this is what worked for me.
So instead of writing this:<div ng-include="'html/form.htm'"></div>
You want to add ng-app="". So it should look like this: <div ng-app="" ng-include="'html/form.htm'"></div>
I was struggling with the same issue and have done almost all what was advised in different stacks but it didn't work for me. On Console, I was getting the Error:
"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
Later I realised, I have to use a local web server (MAMP, WAMP etc.) to make it work.
Please be careful of the above error message. Chances are you are not using a local web server to run you website.
I just figured this one out!
For me, I was using a CDN for importing my angular.min.js file that apparently wasn't working. I switched to:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
and included ng-app="" in my body tag:
<body ng-app="">
<div ng-include="'testfile.html'"></div>
and it's working fine now. Cheers!
Yes, without the '', ng would try to evaluate the contents inside the ng-include("")
This evaluation is another reason why you don't put {{}} inside these directives.
ng-include is not working in chrome as well as in explorer but works in Firefox, so this could be compatibility issues. To be sure, try generating the report in Firefox or Edge or another browser.
I Too had similar issue: Silly mistake was causing IT , I had below textArea EG:
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" > `
Wasn't closed properly Corrected below :
<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>
Thought to post it may help any one I digged hours to solve ....
The ng-include directive should just work normal if you're viewing your file via some server (localhost or online) and NOT viewing your file directly under file system like (file:///yourpath/index.html).
This example from w3schools should work fine.
참고URL : https://stackoverflow.com/questions/22991658/simple-ng-include-not-working
'code' 카테고리의 다른 글
| requestWhenInUseAuthorization이 사용자에게 위치에 대한 액세스를 요청하지 않는 이유는 무엇입니까? (0) | 2020.11.09 |
|---|---|
| Python AttributeError : '모듈'개체에 'SSL_ST_INIT'속성이 없습니다. (0) | 2020.11.09 |
| vue에서 @click으로 여러 함수를 호출하는 방법은 무엇입니까? (0) | 2020.11.09 |
| jQuery Div로 스크롤 (0) | 2020.11.09 |
| Android 대화 상자의 중앙 메시지 (0) | 2020.11.09 |