transclude = true로 지시문 안에 ui-view를 중첩하면보기 콘텐츠가로드되지 않습니다. 개입 지시없이 잘 작동합니다.
그래서 다음을 포함하는 페이지로 :
<body>
<div ng-controller="MainController">
<div ui-view="sampleView"></div>
</div>
</body>
sampleView 콘텐츠가 나타납니다.
하지만 내가 넣으면
<body>
<div ng-controller="MainController">
<div sample-directive>
<div ui-view="sampleView"></div>
</div>
</div>
</body>
그러면보기 콘텐츠가 나타나지 않습니다.
문제를 설명하기 위해 간단한 html 페이지를 만들었습니다. 아래를 참조하십시오.
내가 볼 수있는 한, 앵귤러 컴파일 프로세스는 angular-ui의 ui-view 지시문에서 updateView를 올바르게 호출하고 뷰 콘텐츠를 빌드하고 sample-directive 노드 아래의 dom에 삽입하지만 그렇지 않습니다. t는 실제 보이는 샘플 지시 노드 인 것처럼 보이지만 그 복제물입니다. 나는 그것이 컴파일 순서와 관련이 있다고 생각하기 때문에 지시문에서 영리한 일을해야하지만이 점을 다루는 각도 API 도움말에서 아무것도 찾을 수 없습니다.
나는 포스트 링크 기능을 추가하고 거기에서 $ transclude를 호출하려고 시도했지만 아무런 차이가 없습니다.
누구든지 내가 지시문에 추가해야 할 것을 조언 할 수 있으므로 이것이 작동합니다. 감사
업데이트 추가 조사에서 얻은 새로운 정보 : 원인이 이것이 원인 인 것 같습니다 (이 시점에서는 해결책이 아니지만 그 원인을 알 수 있습니다). angular의 함수 applyDirectivesToNode (angular.js 줄 5919)에서 지시문이 transclude = true를 지정하면 원래 지시문 노드가 복제되어 템플릿 노드를 만듭니다. 즉, 템플릿은 dom에서 볼 수있는 원래 노드가 아닙니다. 이제 angular-ui-router.js 라인 2204에서 ui-view의 컴파일 함수가 호출되면 ui-view 노드의 부모 복사본을 가져와 parentEl에 저장합니다. 그러나 여기에서 문제가 발생합니다.이 부모는 ui-view 노드의 dom에있는 부모입니다. 가장 확실하지 않은 것은 실제로 연결 후 dom에서 끝나는 부모의 인스턴스입니다. 나중에 ui-view가 초기 경로 변경에 대해 업데이트되면 뷰 콘텐츠를 빌드하고 parentEl 아래에 삽입합니다 (angular-ui-router.js 줄 2273).하지만 앞에서 보았 듯이 링크 후 보이는 dom에는 없습니다. ui-view가 중첩 된 지시문을 컴파일하고 연결하여 생성 된 복제본이 아니라 소스 html 노드입니다.
나는 이것이 ui-view의 버그라고 생각합니다.
지시문에 해결 방법을 추가하여 링크 후 뷰 인스턴스를 가져와 지시문에 넣는 방법이있을 수 있습니다. 내가 알아 내면 답을 추가하겠습니다.
html로 문제를 다음과 같이 설명합니다.
<!DOCTYPE html>
<html lang="en" ng-app="viewInDirectiveApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>View inside a directive</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="modules/angular-ui-router.js"></script>
<script>
var viewInDirectiveApp = angular.module('viewInDirectiveApp', ['ui.router']);
viewInDirectiveApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('sampleState', {
url: '/sampleState',
views: {
sampleView: {
template: 'This is the view content',
controller: function ($scope) {
}
}
}
});
$urlRouterProvider.otherwise("/sampleState");
})
.controller('MainController', ['$scope',
function ($scope) {
}])
.directive('sampleDirective', function () {
return {
template: 'Start directive content <div ng-transclude></div> End directive content',
transclude: true
};
});
</script>
</head>
<body>
<div ng-controller="MainController">
Before sampleDirective
<div sample-directive>
Before sampleView
<div ui-view="sampleView"></div>
After sampleView
</div>
After sampleDirective
</div>
</body>
</html>
ui-router 0.2.8에서 확인 된 버그 : https://github.com/angular-ui/ui-router/issues/774
0.2.10에서 수정 됨 : https://github.com/angular-ui/ui-router/pull/858
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다