2014-11-24 3 views
1

정말 이상한 행동을하는 MEANstack 앱이 있습니다. templateUrl을 사용하여 지시문을 만들면 앱이 정지됩니다. 동일한 지시문은 템플릿만으로 html 코드를 사용하여 작동합니다.지시어에서 templateUrl을 사용하면 앱이 멈 춥니 다.

dashboard.html :

<h3>Recent</h3> 
<div my-callout></div> 

dashboard.controller.js :

.directive('myCallout', function(){ 
    return { 

    templateUrl:'myCallout.html' 
}; 
}) 

myCallout.html가 :

<div> 
    <p>fdsfs</p> 
</div> 

이 작품 :

.directive('myCallout', function(){ 
    return { 

    template:' <p> mhgfhut </p>' 
    }; 
}) 

;

+0

은 아마 당신의'myCallout.html'를 찾을 수 있습니까? 당신이 그것을 정확하게 참조하고 있습니까 ?? – c0deNinja

+0

나는 꽤 확신한다. 이것을 다음과 같이 변경하면 경고 메시지가 나타납니다. "Angular를 두 번 이상로드하려고했습니다."그리고 모든 XHR 요청을 계속 유지하는이 미친 무한 루프로 들어갑니다. –

+0

무한 루프가있을 수 있습니다. html 페이지에서 확인하십시오. 당신은 myCallout.html의'myCallout.html' 내에서'myCallout directive'를 호출해서는 안되는 경우에 당신이 만든 지시문을 호출하지 않습니다. – Vishrant

답변

0

귀하의 지시어는 나를 위해 잘 작동 :

~/angular_js_projects/9app$ tree 
. 
├── app.css 
├── app.js 
├── bootstrap 
     <snip> 
├── index.html 
└── myCallout.html 

app.js :

var app = angular.module('myApp', []); 

app.directive('myCallout', function() { 
    return { 
    templateUrl: 'myCallout.html' 
    } 
}); 

myCallout.html :

<div>myCallout.html</div> 

index.html을 :

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <title>AngularJS</title> 

    <meta charset="UTF-8"> <!-- For html5 (default is UTF-8) --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap --> 

    <!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ --> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 

<body> 

    <h3>Recent</h3> 
    <div my-callout></div> 

<!-- Angular --> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
<!-- App Script --> 
<script src="app.js"></script> 
</body> 
</html> 
이 디렉토리 구조와

:

~/angular_js_projects/9app$ tree 
. 
├── app.css 
├── app.js 
├── bootstrap 
     <snip> 
├── index.html 
└── templates 
    └── myCallout.html 

다음 app.js는 다음과 같습니다

var app = angular.module('myApp', []); 

app.directive('myCallout', function() { 
    return { 
    templateUrl: 'templates/myCallout.html' 
    } 
}); 
+0

제 구조는 좀 더 복잡 합니다만, 참조는 문제가 아닌 것 같습니다. XHR 요청이있는 무한 루프와 다음과 같은 오류가 발생합니다. "오류 : [$ rootScope : infdig] 10 $ digest() 반복 도달했습니다. 중단 중 (...)" –

관련 문제