Question

我有两个控制器headerController，aboutController。

headerController - ＆gt;维护导航和重定向

aboutController - ＆gt;在我们的页面加载时工作。

我的问题是我必须在aboutController加载时更新headerController变量值。当关于我们的页面加载时，关于我们的导航应该是活动的，类似于所有页面。

这是我的代码：

app.service('shareService', function () {
    var data;
    return {
        getProperty: function () {
            return data;
        },
        setProperty: function (value) {
            data = value;
        }
    };
});
app.controller('headerController', function ($scope, shareService) {
    $scope.navigation = [
        {url: '#!/home', name: 'Home'},
        {url: '#!/about-us', name: 'About Us'},
        {url: '#!/services', name: 'Services'}
    ];
    var data = shareService.getProperty();
    console.log(data);
    $scope.selectedIndex = 0;
    $scope.itemClicked = function ($index) {
        console.log($index);
        $scope.selectedIndex = $index;
    };
});
app.controller('aboutController', function ($scope, shareService) {
    console.log('test');
    $scope.selectedIndex = 1;
    shareService.setProperty({navigation: $scope.selectedIndex});
});

header.html中：

<header ng-controller="headerController">
    <div class="header">
        <div class="first-half col-md-6">
            <div class="row">
                <div class="logo">
                    <a href="#!/home"><img src="assets/img/logo.png" alt=""/></a>
                </div>
            </div>
        </div>
        <div class="second-half col-md-6">
            <div class="row">
                <div class="social-share">
                    <ul id="social-share-header">
                        <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
                        <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
                        <li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
                    </ul>
                </div>
            </div>
        </div>
        <nav>
            <ul ng-repeat="nav in navigation">
                <li class="main-nav" ng-class="{ 'active': $index == selectedIndex }"
             ng-click="itemClicked($index)">
                    <a href="{{nav.url}}">{{nav.name}}</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

的index.html 这就是我的模板的工作方式。

<body ng-app="myApp">
        <section class="first-section">
            <div ng-include="'views/header.html'"></div>
        </section>
        <section class="second-section">
            <div ng-view></div>
        </section>
        <section class="last-section">
            <div ng-include="'views/footer.html'"></div>
        </section>
    </body>

更新1：添加了index.html文件。

更新2：问题说明：如果我直接运行到about us页面，那么主页导航仍处于活动状态。但它应该是关于我们

Answer 1

您正在寻找的是您的控制器之间基于事件的通信。这可以很容易地使用。 $ rootScope。$ on，$ rootScope。$ emit和$ rootScope。$ broadcast。因为在这个答案中解释所有这三个将是矫枉过正。请仔细阅读article

将值传递给另一个执行第一个

1 个答案: