Angularjs가 ng-view 내에서 스크립트를 로드하지 않음
뷰에 특화된 스크립트가 몇 개 있었어요.단, angularjs가 뷰를 로드하면 스크립트가 실행되지 않는 것 같습니다.
Index.html
<html>
<body ng-app="adminApp">
<div ng-view=""></div>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
Main.html - ng뷰 하의 부하
hello world
<script>
alert('Hello, John!')
</script>
이 예에서는 페이지가 로드되면 웹 사이트에 기본 hello 월드가 인쇄되어 있습니다.하지만 "안녕하세요, 존"이라는 팝업은 뜨지 않습니다.
특정 뷰에 고유한 스크립트를 로드할 수 없는 이유를 알고 계십니까?
추가 정보 app.module
'use strict';
angular.module('adminApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
컨트롤러/main.display
'use strict';
angular.module('adminApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
그게 바로 jqLite가 작동하는 방식입니다.템플릿의 스크립트를 평가하려면 AngularJS 앞에 jQuery를 포함합니다.jQuery가 포함된 경우 스크립트가 평가됩니다.jQuery를 삭제해 보면 원래 관찰된 동작을 볼 수 있습니다.
갱신: 코멘트에서 상세한 설명을 요구하는 사람도 있기 때문에, 이하에 나타냅니다.
루트가 일치하면ngViewjqLite 사용(로드된 경우 jQuery 사용)html()요소의 내용을 설정하는 방법(하나)ngView가 온으로 선언됩니다).바꿔 말하면ngView.link()는 다음과 같은 처리를 합니다.
$element.html(template)
결론부터 말하자면html()jqLite 및 jQuery로 구현됩니다.jqLite는 네이티브를 사용합니다.innerHTML속성 - 내용만 설정하고 스크립트는 평가하지 않습니다.jQuery는 (스크립트 DOM 요소를 생성하여 페이지에 추가함으로써) 모든 스크립트태그를 해석하여 실행합니다.
뷰와 함께 작업해야 하는 스크립트를 포함하면 뷰가 로드되었을 때 어떻게 트리거할 수 있습니까?jquery를 포함하거나 스크립트를 fragment화하고 싶지 않습니다.
를 실행하려면<script>jQuery를 로드하지 않고 태그를 지정하여 jqLite를 사용하여<script>태그하고 나서eval그innerHTML.
app.controller("vm", function($scope, $element) {
//FIND script and eval
var js = $element.find("script")[0].innerHTML;
eval(js);
});
'각'도 참조JS 이슈 #369 - jqLite는 jQuery와 동일한 방법으로 요소를 생성해야 합니다.
언급URL : https://stackoverflow.com/questions/18220197/angularjs-does-not-load-scripts-within-ng-view
'programing' 카테고리의 다른 글
| "로케이터에 대해 둘 이상의 요소를 찾았습니다" 경고 (0) | 2023.02.23 |
|---|---|
| 명령어 정의에서 객체를 반환하는 것과 함수를 반환하는 것의 차이점 (0) | 2023.02.23 |
| Visual Studio Code 자동 Import는 TypeScript의 Lerna 서브패키지로 절대 경로만 제공합니다. (0) | 2023.02.23 |
| Orderby는 ng-repeat의 dict 구문을 사용하지 않습니다. (0) | 2023.02.23 |
| 생성자에서 상태를 정의하는 것이 좋습니까, 아니면 속성 이니셜라이저를 사용하는 것이 좋습니까? (0) | 2023.02.23 |