Question

我试图在单击按钮时显示不同的视图。这是我目前拥有的东西，但是当我单击按钮时，什么都没有改变，我留在主页上。我正在尝试使用$ 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>

hello.html

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

Answer 1

在setHello中移动mainCtrl函数。

当前，您正在尝试从范围为setHello的html访问helloCtrl内部定义的mainCtrl函数。更正范围将起作用。

希望这会有所帮助：）

单击按钮即可更改视图

1 个答案: