AngularJs внедряет html-элемент в оболочку из дочернего представления из разметки

Question

AngularJs внедряет html-элемент в оболочку из дочернего представления из разметки

0

Я новичок в угловатости и изо всех сил пытаюсь выработать лучший угловой подход к решению этой проблемы.

У меня есть страница оболочки, в которой есть место, где я хотел бы добавить элемент (панель инструментов) для каждого представления.

В каждом представлении может быть несколько другая панель инструментов (заголовок, кнопки и т.д.),

Я хотел бы объявить эту панель инструментов в разметке в представлении, чтобы я мог привязать к ней данные, которые уже используют, и их проще поддерживать.

Я понимаю, что я мог бы использовать представление для инъекций, но все примеры, которые я видел, показывают, что он заполняется из шаблона, на который ссылается файл маршрутизации.

Я видел директиву, используемую для обновления заголовка страницы, который похож на то, что я хочу, https://github.com/apparentlymart/angularjs-viewhead, но когда я его реплицировал/изменял и пытался впрыскивать сложную разметку html, это не понравилось Это.

Каков рекомендуемый угловой подход к решению этой проблемы? Я приближаюсь к проблеме не так?

Вот упрощенный пример. http://plnkr.co/edit/n23vcBAc4tZUqBxnxcaY?p=preview

<!DOCTYPE html>
<html lang="en" data-ng-app="example">
<head>
    <meta name="viewport" content="initial-scale=1" />
</head>
<body>
    <a ui-sref="view1" class="md-button" >View 1</a>
        <a ui-sref="view2" class="md-button" >View 2</a>

    <div class="page-contents">
        <div class="toolbar">This should be replaced with the toolbar from each page</div>

        <div class="content-wrapper">
            <div data-ui-view="page"></div>
        </div>      
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

<div class="view1" style="background-color: yellow;">
    <div class="toolbar-1" style="background-color: gray;">Toolbar 1</div>
    <h2>View 1</h2>
    <div>View contents</div>
</div>

<div class="view2" style="background-color: lightgreen;">
    <div class="toolbar-2" style="background-color: gray;">Toolbar 2</div>
    <h2>View 2</h2>
    <div>View contents</div>
</div>


angular
    .module('example', [
        'ui.router'
    ]);

(function () {
    'use strict';

    angular
        .module('example')
        .config(configureRoutes);

    configureRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];

    /* @ngInject */
    function configureRoutes($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('view1', {
                url: '/view1',
                views: {
                    'page': {
                        templateUrl: 'view1.html',
                    }
                }
            })
            .state('view2', {
                url: '/view2',
                views: {
                    'page': {
                        templateUrl: 'view2.html'
                    }
                }
            })

        $urlRouterProvider.otherwise('/view1');

    }
})();

Ben 30 июнь 2015, в 01:40

Источник

Теги:

angularjs

angular-ui-router

1 ответ

Ещё вопросы

Ben · Answer 1 · 2015-10-03T01-48-00.000Z

То, как я решил это, - создать сервис панели инструментов и заполнить его с контроллера. Она не достигла моей первоначальной цели поместить ее в разметку, но она упростила реализацию.