单击按钮即可更改视图

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里面定义的函数helloCtrl从具有的范围HTML mainCtrl 。 更正范围将起作用。

希望这可以帮助：）

单击按钮即可更改视图

问题描述

1 个解决方案

解决方案1
0 2018-10-18 04:23:11

单击按钮即可更改视图

问题描述

1 个解决方案

解决方案1 0 2018-10-18 04:23:11

解决方案1
0 2018-10-18 04:23:11