구성 요소가 내 ui-view에 주입되지 않습니다.

UI Routers 1.0.0을 사용하여 1.5.9 각도의 상용구를 설정하려고합니다. ui-view 내에서 부모 상태 구성 요소를 표시 할 수 있지만 부모 내에서 상태를 중첩하면 내 구성 요소가 내 ui-view에 주입되지 않습니다. 구성 요소가 내 ui-view에 주입되지 않습니다.

이

이 그것은 내가 UI를보기에 아무것도 주입 드릴 수 없습니다이 시점에서 주요 구성 요소

<div class="main-container"> 
    <banner></banner> 
    <div ui-view='ui-view></div> 
</div>

내 index.html을

<body ng-app="app"> 
<ui-view></ui-view> 
</body>

입니다.

이 내가 잘못 뭘하는지 모르겠어요 내 자바 스크립트 파일

$stateProvider 
    .state('app', { 
     url: '/', 
     component: 'main' 
    }) 
    .state('app.login', { 
     url: '/login', 
     views: { 
     'ui-view': { 
      templateUrl: './app/login/login.html' 
     } 
     } 
    });

입니다 오른쪽 경로에 어떤 도움/방향을 주시면 감사하겠습니다.

나는 모든 것이 예상대로 작동 부모 상태로 로그인을 참조하면

도움이 될 수 EDIT

추가 정보.

로그인 구성 요소는 본인의 메인 모듈에 포함 된 별도 모듈의 일부입니다.

출처

2016-12-11 Sai

'index' 페이지'ui-view' 컨테이너에'login.html'을 적재하려면''을 다시 선언 할 필요가 없습니다. '주 구성 요소'파일. 당신은 UI 라우터에 알파 버전에 있습니까? – Searching

1.0.0-beta.1은 제가 사용하고있는 버전입니다. 나는 명명 된 뷰를 제거했으나 요소를 검사 할 때 여전히 빈 UI 뷰가있는 빈 페이지가 나타납니다. – Sai

각 상위 요소에서 한 아이의 상태를 중첩 들어, 당신이 당신의 주요 구성 요소 템플릿에 사용되는 ui-view 지침은 "UI 뷰"의 값을 추가하여처럼 명명 된 뷰를 사용할 필요가 없습니다. 명명 된 뷰는 둘 이상의 ui-view를 처리하려는 경우에만 필요합니다. 그런 다음 이름으로 참조해야합니다.

명명 된보기를 올바르게 대상으로 지정하지 않았기 때문에 샘플에서는 내용이 표시되지 않습니다. 명명 된 뷰가 루트 파일이 아닌 템플리트에 정의 된 경우 명명 된 뷰를 처리하는 방법에 대한 몇 가지 규칙이 있습니다. 이 경우 "ui-view-name @ state"구문을 사용하여 ui-view를 참조하면 더 구체적 일 필요가 있습니다.이 구문은 "ui-view @ app"를 의미합니다.

그러나 앞서 언급 한 것처럼 간단한 경우 ui-view의 이름을 생략하고 상태 구성의 views 섹션을 일반 템플릿 (또는 구성 요소 참조)으로 바꿉니다. 중첩 뷰에 대한 자세한 내용은

.state('app.login', { 
    url: '/login', 
    templateUrl: './app/login/login.html' 
});

는 ui-router docs에서 큰 샘플 애플리케이션에서 참조하시기 바랍니다.

출처

2016-12-12 00:31:23

이봐, 명명 된 뷰를 없애기 위해 코드를 변경했습니다. 나는/로그인 할 때 여전히 빈 페이지 만 얻는다. 요소를 검사 할 때 UI 뷰는 비어 있습니다. 다른 도움이 필요하면 알려주세요. – Sai

콘솔 로그에서 오류를 확인하십시오. 거기 아무도 없나요? 또한 로그인이 각도 구성 요소이거나 템플릿과 컨트롤러 만 지정하여 참조하는 경우에도 다릅니다. 마지막 대답은 로그인이 templateUrl을 통해 직접 사용할 수없는 구성 요소 인 것 같습니다. 그것은 비 구성 요소, 레거시 스타일을위한 것입니다. 그래서 ui-view 이름을 생략하고 로그인을 구성 요소로 참조하는 것이 트릭을 만들었습니까? –

그래서 이건 정말 이상한 일입니다. 왜 그렇게 작동하는지에 대한 설명이 없습니다. 내가 한 모든 대신 내 부모가 갖는

$stateProvider 
    .state('login', { 
     url: '/login', 
     component: 'main' 
    }) 
    .state('login.default', { 
     url: '/default', 
     component: 'login' 
    });

아래의 하나에 자바 스크립트 파일을 변경했다 '/'는 '/ 로그인'로 변경되었습니다. 나는 누군가가이 행동의 이유를 알고 있는지 알고 싶어 할 것입니다.

출처

2016-12-12 02:39:06 Sai

$stateProvider 
    .state('app', { 
     url: '/', 
     templateUrl: path/to/main_component.html 
    }) 
    .state('app.login', { 
     url: '/login', 
     views: { 
     'ui-view': { 
      templateUrl: './app/login/login.html' 
     } 
     } 
    });

당신이 ui-view 부모 상태 템플릿에 확인됩니다 app.login보기 (상태)에있을 때. 템플릿이 없으면 렌더링 할 위치를 알 수 없습니다.

'ui-view':{}은 상위 뷰를 대상으로합니다. '[email protected]':{}은 index.html 인 루트 구성 요소를 대상으로합니다.

출처

2016-12-12 09:58:54

구성 요소가 내 ui-view에 주입되지 않습니다.

답변

관련 문제