Question

我是棱角分明的新人，一直在努力找出解决这个问题的最佳角度方法。

我有我的shell页面，我希望为每个视图注入一个元素（工具栏）。

每个视图可以有一个略有不同的工具栏（标题，按钮等）

我想在视图中的标记中声明这个工具栏，以便我可以将数据绑定到视图已经使用的数据，并且它更容易维护。

我的理解是我可以使用注入视图，但我看到的所有示例都显示它是从路由文件中引用的模板填充的。

我看过一个用于更新页面标题的指令，它与我想要的类似，https://github.com/apparentlymart/angularjs-viewhead但是当我复制/修改它并尝试注入复杂的html标记时，它并不喜欢它。 / p>

解决此问题的建议角度方法是什么？我是否以错误的方式处理问题？

这是一个简化的例子。 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');

    }
})();

Answer 1

我解决这个问题的方法是创建一个工具栏服务，并从控制器填充它。它没有实现我最初将其放入标记的目标，但它确实简化了实现。

AngularJs从标记

1 个答案: