Nền thân máy khác nhau cho các trạng thái Giao diện người dùng khác nhau

Trong trường hợp đơn giản, tôi có hai trạng thái Giao diện người dùng-Router và muốn màu nền cơ thể khác nhau cho chúng.Nền thân máy khác nhau cho các trạng thái Giao diện người dùng khác nhau

Lý tưởng nhất, tôi sẽ như vậy, muốn làm như sau:

<body ng-class="background" ui-view> 
</body>

và sau đó trong bộ điều khiển cho các tiểu bang thiết lập các lớp nền (có thể năng động, có nghĩa là: tính bằng bộ điều khiển):

stateHelperProvider 
    .state({ 
     name: 'a', 
     url: '/a', 
     templateUrl: 'views/a.html', 
     controller: function ($scope) { 
      $scope.background = 'bg1'; 
     } 
    }) 
    .state({ 
     name: 'b', 
     url: '/b', 
     templateUrl: 'views/b.html', 
     controller: function ($scope) { 
      $scope.background = 'bg2'; 
     } 
    });

Nhưng đặt thuộc tính ui-view trên cơ thể sẽ xóa nó. Vì vậy, tôi phải đặt thuộc tính ui-view trên một div bên trong cơ thể.

<body> 
    <div ui-view></div> 
</body>

Bây giờ tôi có thể kiểm soát nền cơ thể như thế nào?

Tôi biết các lỗi khác nhau (ví dụ: truy cập thuộc tính DOM lớp của phần thân trong chức năng onEnter của UI-Router, ...), nhưng có cách nào tốt để làm điều đó không?

Hoặc là tất cả về việc làm cho chiều cao đầy đủ là div[ui-view] (là not trivial) và đặt nền trên yếu tố này để bắt chước cách áp dụng background on the body takes up the full viewport?

Nguồn

2015-07-21 jack_kerouac

Vì vậy, để tổng hợp các bài học của tôi, có hai cách để thực hiện. Cả hai yêu cầu dịch vụ $state để ở trong số $rootScope. Sự thanh lịch của can be disputed này, nhưng tôi sẽ đi cho giải pháp này.

Nếu lớp nền được tùy thuộc vào tình trạng chỉ, thêm chúng vào custom data của tiểu bang: Mã

Ví dụ:

.state({ 
    ..., 
    data: { 
     bodyClass: 'bg1' 
    } 
});

Sau đó, trên cơ thể, chấm ng-class và tham chiếu dữ liệu của tiểu bang hiện tại:

<body ng-class="$state.current.data.bodyClass">

Nếu các lớp nền là (ngoài trạng thái) tùy thuộc vào thứ khác (như thông số trạng thái hoặc dịch vụ, ...), Sử dụng state's resolve mechanism: Mã

Ví dụ:

.state({ 
    ..., 
    resolve: { 
     bodyClass: function($stateParams) { 
      // do some calculation 
      return ... 
     } 
    } 
});

Sau đó, trên cơ thể, chấm ng-class và tham khảo các tên lớp giải quyết thông qua $state.$current.locals.globals:

<body ng-class="$state.$current.locals.globals.bodyClass">

Trong cả hai trường hợp , bodyClass có thể có bất kỳ thứ gì hợp lệ cho ng-class directive.

Nguồn

2015-07-23 13:16:09

Btw. [The Angular UI-Router tiêu đề plugin] (https://github.com/nonplus/angular-ui-router-title) để cập nhật tiêu đề trang nào [một cái gì đó tương tự] (https://github.com/nonplus/angular -ui-router-title/blob/master/src/angular-ui-router-title.js # L6) –

Điều này phù hợp với tôi! - Chỉ muốn chỉ ra rằng để làm cho nó hoạt động, bạn phải chạy '$ rootScope. $ State = $ state;' từ bên trong một '.run' khi bạn khai báo module của bạn. Điều này được đề cập và in đậm trong câu đầu tiên của câu trả lời nhưng không có ví dụ nào được đưa ra. Bạn có thể tìm thấy mã ví dụ bằng cách theo liên kết này http://stackoverflow.com/questions/18572930/whats-the-purpose-of-setting-rootscope-state-state-with-angular-ui-ui-rou cũng được cung cấp trong câu trả lời –

Có lẽ không chính xác, nhưng có lẽ bạn chỉ cần thay đổi màu nền cơ thể trực tiếp trong bộ điều khiển?

stateHelperProvider 
    .state({ 
     name: 'a', 
     url: '/a', 
     templateUrl: 'views/a.html', 
     controller: function ($scope) { 
      document.body.style.background = 'bg1'; 
     } 
    }) 
    .state({ 
     name: 'b', 
     url: '/b', 
     templateUrl: 'views/b.html', 
     controller: function ($scope) { 
      document.body.style.background = 'bg2'; 
     } 
    });

Hoặc trong trường hợp này chỉ cần thêm/xóa lớp CSS vào phần thân?

Chúc may mắn '

Nguồn

2015-07-21 15:39:27

Điều đó có hiệu quả và có thể tốt với các lớp học. Vấn đề là, nếu tôi có trạng thái 'c' không có nền, nền của trạng thái trước đó sẽ vẫn còn. Dĩ nhiên tôi có thể nghe '$ phá hủy' trên phạm vi, nhưng điều đó một lần nữa không hoàn toàn thanh lịch. –

Điều gì về bộ điều khiển trên cơ thể với 'ngStyle' có thể nhận giá trị trang và thay đổi nền tùy thuộc vào điều kiện về tên trang? Có lẽ không phải là rất chính xác một lần nữa, nhưng hy vọng nó có thể giúp đỡ. –

Tôi có thể có thể có lớp nền dưới dạng [thuộc tính dữ liệu tùy chỉnh của tiểu bang] (https://github.com/angular-ui/ui-router/wiki#attach-custom-data-to-state-objects) và sau đó làm một cái gì đó như thế này: '' với '$ state' trên' $ rootScope'. Không chính xác những gì bạn đề xuất nhưng lấy cảm hứng từ nó. –

Nền thân máy khác nhau cho các trạng thái Giao diện người dùng khác nhau

Trả lời

Các vấn đề liên quan