Question

我有两个控件：左侧导航和右侧窗格，用于在单击左侧导航中的任何项目时更改内容。

这是html（角度视图）：

<nav class="navigation">
        <ul class="list-unstyled" ng-controller="NavigationController as navigation">
            <li ng-repeat="nav in navigation.tabs" class="has-submenu">
                <a href="#" ng-click="navigation.changeContent(nav.name)">{{nav.name}}</a>
                <ul class="list-unstyled" ng-show="nav.subNav">
                    <li ng-repeat="subnav in nav.subNav"><a href="#" ng-click="navigation.changeContent(subnav.name)">{{subnav.name}}</a></li>
                </ul>
            </li>
        </ul>
    </nav>

<section class="content" ng-controller="ContentSwitcher as content">
{{content.tab}}
<div class="warper container-fluid" >
<div class="container-scroll"></div>
</div>
</section>

这是控制器

(function () {
    var app = angular.module('provisioning', []);

    app.service('contentService',function(){
       var tab = 'Dashboard';
        return {
            getTab : function(){ return tab; },
            setTab : function(value){ tab = value}
        }
    });
    app.controller('NavigationController',['contentService','$log', function(cs,log){
        this.tabs = [
            {
                name: 'Dashboard'
            },
            {
                name: 'Manage',
                subNav: [
                    {
                        name: 'Account'
                    },
                    {
                        name: 'Facility'
                    },
                    {
                        name: 'Doctors'
                    },
                    {
                        name: 'Patients'
                    },
                    {
                        name: 'Nurses'
                    },
                    {
                        name: 'Device Inventory'
                    }

                ]
            },
            {
                name: 'Health Tracker'
            },
            {
                name: 'Reports'
            },
            {
                name: 'Settings'
            },
            {
                name: 'Logout'
            }
        ];
        var template = this;
        this.changeContent = function(tab){
            cs.setTab(tab);
        }
    }]);
    app.controller('ContentSwitcher', ['contentService',function(cs){
        this.tab = cs.getTab();
    }]);
})();

另外，这是实现我想在angularjs做什么的最好方法吗？我创建了一个服务并在两个不同的控制器中共享变量。然而，它不起作用。单击左侧菜单上的任何项目时，右侧内容永远不会更新。

Answer 1

我对上一个问题的回答可能有所帮助。它使用一种观察者模式。

AngularJs update directive after a call to service method

您的服务将更改为允许所有感兴趣的控制器或指令生成或侦听某些事件并访问相关数据。

Answer 2

您需要告诉控制器选项卡的值已更改，然后使用服务中的新值更新它。第二个控制器（ContentSwitcher）无法知道值已更改，您只需将getTab的字符串值分配给this.tab。

自动存档的一种方法是将服务内部的变量类型从string更改为object（例如tab = {name:'Dashboard'}），然后再调用$scope.$apply改变了它。

在第一个控制器中，您仍然会在this.tab = service.getTab()视图中指定{{tab.name}}（这将是一个对象）。

以角度分享不同控制器之间的状态

2 个答案: