问AngularJs从标记的子视图中注入shell中的html元素
EN

Stack Overflow用户

提问于 2015-06-30 07:25:16

回答 1查看 208关注 0票数 0

我刚接触angular，一直在努力找出解决这个问题的最佳angular方法。

我有我的shell页面，其中有一个地方，我想为每个视图注入一个元素(工具栏)。

每个视图可以有一个略有不同的工具栏(标题、按钮等)

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

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

我见过一个用于更新页面标题的指令，它的作用类似于我想要的，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');

    }
})();

angularjs

angular-ui-router

回答 1

Stack Overflow用户

发布于 2015-10-03 11:36:40

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31127184

复制

相似问题

问AngularJs从标记的子视图中注入shell中的html元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs从标记的子视图中注入shell中的html元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs从标记的子视图中注入shell中的html元素
EN