单击按钮更改视图答案

【问题标题】：Changing view upon button click单击按钮更改视图
【发布时间】：2018-10-18 03:33:57
【问题描述】：

我试图在单击按钮时显示不同的视图。这是我目前拥有的，但是当我单击按钮时，没有任何变化，我仍然在主页上。我正在尝试使用 $location.path('/path');

app.js

    var app = angular.module("app", ['ngRoute']);

    app.config(function ($routeProvider) {
        $routeProvider
            .when("/", { templateUrl: "views/news.html", controller: "mainCtrl"})
            .when("/hello", { templateUrl: "views/hello.html", controller: "helloCtrl"})

    });

app.controller("mainCtrl", function ($scope) {
    $scope.setNews = () => { 
        $scope.showHello = false;
        $scope.newsactive = "butactive"
        $scope.helloactive = ""
    };
});

    app.controller("helloCtrl", function ($scope) {
        $scope.setHello = () => { 
            $location.path('/hello');
            $scope.showHello = false;
            $scope.helloactive = "butactive"
            $scope.newsactive = ""
        };
    });

index.html

<body ng-app="app" ng-controller="mainCtrl">
    <div>
        <div ng-include="'views/title.html'"></div>
        <div ng-include="'views/navbar.html'"></div>
    </div>

        <div ng-view></div>

    <div ng-include="'views/footer.html'"></div>

</body>

navbar.html

<div class="navbar">
    <button id="newsbutton" ng-click="setNews()" ng-class="newsactive">News</button>    
    <button id="aboutbutton" ng-click="setHello()" ng-class="helloactive">Hello</button>    
</div>

你好.html

<div class="content">
    <div ng-hide="showHello" id="hello">
        <h1>Hello</h1>
    </div>
</div>

【问题讨论】：

标签： javascript html angularjs angular

【解决方案1】：

在您的mainCtrl 中移动setHello 函数。

目前您正尝试从具有mainCtrl 范围的html 访问helloCtrl 中定义的setHello 函数。更正范围将起作用。

希望这会有所帮助:)

【讨论】：