Góc 1,3 + ui-router + generator-ng-poly nhúng các khung nhìn lồng nhau (?) Không hoạt động

Question

Tôi mới sử dụng Angular, ui-router và generator-ng-poly và hy vọng ai đó có thể trợ giúp với vấn đề cú pháp đơn giản.

Tôi đang sử dụng máy phát điện-ng-poly cho một dự án mới và làm việc từ "Ví dụ cấp độ sâu" với ứng dụng dựa trên góc 1.3 sử dụng ui-router và HTML.

Trước tiên, tôi đã tạo mô-đun "nhà riêng", sau đó là mô-đun "tiêu đề" bên trong mô-đun đó. Vì vậy, ...

yo ng-poly:module home 
yo ng-poly:module home/header 

nào mang lại cho tôi hai bộ điều khiển này: app/home/home.js

(function() { 
    'use strict'; 

    /* @ngdoc object 
    * @name home 
    * @requires $stateProvider 
    * 
    * @description 
    * 
    */ 
    angular 
    .module('home', [ 
     'ui.router', 
     'home.header' 
    ]); 

    angular 
    .module('home') 
    .config(config); 

    function config($stateProvider) { 
    $stateProvider 
     .state('home', { 
     url: '/home', 
     templateUrl: 'home/home.tpl.html', 
     controller: 'HomeCtrl', 
     controllerAs: 'home' 
     }); 
    } 

})(); 

và app/home/header/header.js

(function() { 
    'use strict'; 

    /* @ngdoc object 
    * @name home.header 
    * @requires $stateProvider 
    * 
    * @description 
    * 
    */ 
    angular 
    .module('home.header', [ 
     'ui.router' 
    ]); 

    angular 
    .module('home.header') 
    .config(config); 

    function config($stateProvider) { 
    $stateProvider 
     .state('header', { 
     url: '/header', 
     templateUrl: 'home/header/header.tpl.html', 
     controller: 'HeaderCtrl', 
     controllerAs: 'header' 
     }); 
    } 

})(); 

Bây giờ tôi muốn sử dụng "tiêu đề" từ bên trong home.tpl.html và tôi đang đấu tranh với cách thực hiện điều này. Từ những gì tôi hiểu hoặc

<div ui-view=“header”></div> 

hoặc

<div ui-view=“home.header”></div> 

nên làm việc. Nhưng không phải vậy. Giờ Googling đã không giúp vì tất cả các ví dụ sử dụng định dạng $ stateProvider phổ biến hơn, nơi có những xích tiểu bang như vậy:

$stateProvider 
     .state('home', { 
     url: '/home', 
     templateUrl: 'home/home.tpl.html', 
     controller: 'HomeCtrl', 
     controllerAs: 'home' 
     }) 
     .state('home.header', { 
     url:'/header', 
     templateUrl: 'home/header/header.tpl.html', 
     controller: 'header/header-controller.js', 
     controllerAs: 'header' 
     }); 

Làm thế nào tôi nên tham khảo "tiêu đề" để có nó hiển thị đúng trong home.tpl .html?

Answer 1

Để có thể sử dụng trạng thái header ở bang home, họ sẽ cần phải lồng nhau (xích). Ứng dụng của bạn chỉ có thể ở trong một trạng thái cùng một lúc, nhưng các trạng thái lồng nhau cần cho phép sử dụng mà bạn yêu cầu.

Vì vậy, nó không rõ ràng, nhưng bạn có thể một cách an toàn làm cho một nhà nước là cha mẹ của một trong các tập tin riêng biệt/configs vì các tác phẩm đăng ký cách (nhấn mạnh là của tôi):

Nếu bạn đăng ký duy nhất một trạng thái, như contacts.list, bạn PHẢI xác định trạng thái được gọi là contacts tại một số thời điểm, nếu không sẽ không có trạng thái nào được đăng ký. Trạng thái contacts.list sẽ được xếp hàng đợi cho đến khi contacts được xác định. Bạn sẽ không thấy bất kỳ lỗi nào nếu bạn làm điều này, vì vậy hãy cẩn thận rằng bạn xác định cha mẹ để con bạn được đăng ký đúng cách. - Nested States

Ngoài ra, thuộc tính ui-view không lấy tên của trạng thái mà bạn muốn như minh họa trong ví dụ của mình. Đó là thay vì tạo ra một cái nhìn được đặt tên (một tính năng rất mạnh mẽ - Multiple Named Views), nhưng một cái gì đó bạn có thể không cần chỉ được nêu ra. Chỉ cần thoát là:

<div ui-view></div> 

Vì vậy, để đặt ứng dụng về trạng thái chính xác, hãy sử dụng chức năng $state.go(): ví dụ:

$state.go('home'); 

Answer 2

không hiểu chính xác mục tiêu mục tiêu của bạn.Bạn có muốn thêm chế độ xem có tên là tiêu đề ở cấp chế độ xem chính của bạn home (xem Multiple-Named-Views) hoặc chế độ xem lồng nhau đơn giản?

Nếu vậy, bạn không nên đặt tên cho bạn ui-view trong html, và xác định một tên đường con với dấu chấm cú pháp để suy ra hệ thống cấp bậc của bạn đến $ stateProvider, như thế này:

$stateProvider 
    .state('home.header', {...})