AngularJS - Nhiều ng-view trong một mẫu duy nhất

132

Tôi đang xây dựng một ứng dụng web động bằng cách sử dụng AngularJS. Có thể có nhiều ng-viewtrên một mẫu không?

angularjs ng-view

— Jayram
nguồn

2

dường như có một yêu cầu kéo, vẫn còn một số lỗi: github.com/angular/angular.js/pull/1198

— Alp

4

Jan Varwig viết về vai trò của các chỉ thị trong Angular. Nó không phải là một câu trả lời cho câu hỏi của bạn, nhưng trong một số trường hợp, ý tưởng của anh ấy có thể là sự thay thế tốt: jan.varwig.org/archive/angularjs-view-vs-directives/ trộm

— Juha Palomäki

đã trải qua hướng dẫn góc cạnh và có cùng một câu hỏi, họ không làm cho nó rất rõ ràng, có vẻ như là một khái niệm khá sâu sắc ..

— qwwqwwq

100

Bạn có thể có một ng-view.

Bạn có thể thay đổi nội dung của nó bằng nhiều cách: ng-include, ng-switchhay bộ điều khiển và các mẫu lập bản đồ khác nhau thông qua các routeProvider.

— pasine
nguồn

1

bộ điều khiển ánh xạ và các mẫu sẽ thay thế toàn bộ phần tử ng-view, phải không?

— zx1986

9

Điều gì về động thay đổi nội dung của một widget? Bạn có muốn tạo chế độ xem cho tiện ích và bộ điều khiển cho tiện ích và mô hình cho tiện ích không?

— Ray Suelzer

Có nên sử dụng lượt xem? Không phải là tốt hơn để xác định div với ng-showvà ng-hidevà kiểm soát mức độ hiển thị của chúng bằng các biến? Bởi vì đôi khi tôi có thể muốn ẩn / hiển thị nhiều thành phần

— SomethingS Something

39

UI-Router là một dự án có thể giúp: https://github.com/angular-ui/ui-router Một trong những tính năng của nó là Nhiều chế độ xem được đặt tên

UI-Router có nhiều tính năng và tôi khuyên bạn nên sử dụng nó nếu bạn đang làm việc trên một ứng dụng nâng cao.

Kiểm tra tài liệu của nhiều lượt xem được đặt tên ở đây .

— Morteza Ziyae
nguồn

6

Thật không may như ui-router readme nói: Lưu ý: UI-Router đang được phát triển. Như vậy, trong khi thư viện này được kiểm tra tốt, API có thể thay đổi. Chỉ xem xét sử dụng nó trong các ứng dụng sản xuất nếu bạn cảm thấy thoải mái khi theo dõi thay đổi và cập nhật cách sử dụng của mình cho phù hợp.

— đào tạo

1

@trainoocation Đã sử dụng nó cho nhiều dự án, có vẻ rất ổn định và cho đến nay tôi không gặp vấn đề gì về việc thay đổi API, thực tế tôi không nhớ bất kỳ thay đổi lớn nào trong API.

— Morteza Ziyae

19

Tôi tin rằng bạn có thể hoàn thành nó chỉ bằng cách độc thân ng-view. Trong mẫu chính, bạn có thể có ng-includecác phần cho chế độ xem phụ, sau đó trong bộ điều khiển chính xác định các thuộc tính mô hình cho từng mẫu phụ. Vì vậy, họ sẽ tự động liên kết với ng-includecác phần. Điều này giống như có nhiềung-view

Bạn có thể kiểm tra ví dụ được đưa ra trong ng-include tài liệu

trong ví dụ khi bạn thay đổi mẫu từ danh sách thả xuống, nó sẽ thay đổi nội dung. Ở đây giả sử bạn có một chính ng-viewvà thay vì chọn thủ công nội dung phụ bằng cách chọn thả xuống, bạn làm điều đó như khi chế độ xem chính được tải.

— Tekz
nguồn

2

Trong trường hợp không có giải pháp như UI-Router, ng-include thực sự là một giải pháp thay thế khả thi, như bạn đã giải thích. Điều mà ng-include không thể thực hiện được là nhiều lượt xem theo định hướng URL (trạng thái), $ route không thể tự động hiển thị các chế độ xem khác nhau dựa trên URL hiện tại. Chúng ta có thể xoắn cánh tay của Angular và biến nó thành hiện thực bằng cách sử dụng logic tùy chỉnh trong bộ điều khiển, giống như ví dụ trong ng-include tài liệu , nhưng đó không phải là mẫu kiến trúc ứng dụng mong muốn, UI-Router là loại giải pháp phù hợp.

— Yiling 3/03/2015

Một điểm cộng cho bình luận @Yiling. Sử dụng ng-gộp là một cách giải quyết.

— Farshid Saberi

13

Sử dụng ng-viewmô-đun thông thường, bạn không thể có nhiều hơn một mẫu động.

Tuy nhiên, dự án này cho phép bạn làm như vậy (tìm kiếm ui-router).

— ŁukaszBachman
nguồn

3

angular-ui có vẻ như là một lựa chọn tốt trong tương lai (gần) nhưng nó vẫn có vẻ rất không ổn định cho việc sử dụng sản xuất

— David Barreto

8

Có thể có nhiều khung nhìn hoặc lồng nhau. Nhưng không phải bởi ng-view.

Các mô-đun định tuyến chính trong góc không hỗ trợ nhiều chế độ xem. Nhưng bạn có thể sử dụng ui-router. Đây là mô-đun của bên thứ ba mà bạn có thể nhận được thông qua Github, angular-ui / ui-router, https://github.com/angular-ui/ui-router . Ngoài ra, một phiên bản mới của ngRouter (ngNewRouter) hiện đang được phát triển. Hiện tại nó không ổn định. Vì vậy, tôi cung cấp cho bạn một ví dụ khởi động đơn giản với bộ định tuyến ui. Sử dụng nó, bạn có thể đặt tên cho các khung nhìn và chỉ định các mẫu và bộ điều khiển nào sẽ được sử dụng để hiển thị chúng. Sử dụng $ stateProvider, bạn nên chỉ định cách hiển thị giữ chỗ cho trạng thái cụ thể.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Bạn cần tham khảo angularjs và angular-ui.router cho mẫu này.

$ bower install angular-ui-router

— Đầm lầy Saberi
nguồn

Cảm ơn bạn Farshid này là tuyệt vời! Nó nên được đề cập trong góc-ui / ui-router Github kho github.com/angular-ui/ui-router nơi tôi có các mô-đun

— totallytotallyamazing

Tôi không chắc tại sao bạn cần phải làm điều đó. Tại sao không ng-bao gồm tiêu đề / chân trang và ng-xem nội dung?

— dùng441521

ng-include sẽ hoạt động nếu các tệp được lưu trữ, ví dụ như. trên nodejs. Nếu làm việc với thư mục cục bộ, nó sẽ gây ra lỗi tên miền chéo.

— Sid

0

Bạn không thể có nhiều ng-view. Dưới đây là trường hợp sử dụng của tôi, nơi tôi đã giải quyết yêu cầu của tôi. Tôi muốn có hành vi theo thẻ trong hộp thoại mô hình của tôi. Tôi đã phải đối mặt với vấn đề khi nhấp vào các tab có siêu liên kết sẽ gọi các liên kết bộ định tuyến. Tôi đã giải quyết điều này bằng cách sử dụng nút và css cho các tab. Khi người dùng nhấp vào tab, nó thực sự sẽ không gọi bất kỳ siêu liên kết nào sẽ luôn gọi ng-router. Khi người dùng nhấp vào tab, nó sẽ gọi một phương thức, trong đó tôi tự động tải html. Dưới đây là chức năng nhấp chuột vào tab

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Người dùng $ templateRequest. Trong trang test_template.html thêm nội dung html của bạn. Nội dung html này sẽ được liên kết với bộ điều khiển của bạn.

— Aslam anwer
nguồn