AngularJS 从控制器更改 ng-view 中的视图

Question

我有一个 JavaScript 网络应用程序，我在其中使用 AngularJS 来简化操作，但现在我遇到了一个小问题。

我想从 ng-controller 更改视图。我使用 $location.path 来执行此操作，但遗憾的是，没有任何反应。如果我检查 $location 对象，路径将被正确更改，但视图不会更改。

我的 Home.html 中有一个 ng-view。这是我为它写的配置：

<html ng-app="app">
   ...
   <body>
      <div id="navigation-menu" ng-controller="NavigatorController">
          <a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page2">Page2</a>
          <a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page3">Page3</a>
      </div>

      <div ng-view></div>
   </body>
</html>

这是我为 $routeProvider 所做的配置，它在菜单系统中使用时完美无缺

myApp.config(function ($routeProvider) {
$routeProvider
    .when('/', {
        templateUrl: 'Page1.html',
        controller: 'Page1Controller'
    })
    .when('/page2', {
        templateUrl: 'Page2.html',
        controller: 'Page2Controller'
    })
    .when('/page3', {
        templateUrl: 'Page3.html',
        controller: 'Page3Controller'
    });
});

打开应用程序后，我想在 ng-view 中显示 Page1.html，所以我猜这是用 '/' url 排序的。

问题是，我希望能够从每个其他控制器返回到 Page1.html。

我尝试在每个其他控制器中创建一个事件，如下所示：

$scope.NavigateBack = function() {
    $location.path('/');
}

遗憾的是，它不起作用。虽然我没有收到任何错误消息...我尝试在路径中使用不同的地址，例如“/page2”，但没有任何效果。

我做错了什么，视图没有改变并且页面没有导航？

Answer 1

我推荐使用

$window.location = "#/"

但不要忘记将 $window 注入您的控制器

Answer 2

在Page2Controller中定义行为，例如：

$scope.goBack = function(){
        $location.path("#/");
    }

并在 Page2.html 中添加一些按钮：

<button ng-click="goBack()">Return</button>

您可能还需要将导航链接 href 属性更改为 #/page2 和 #/page3

AngularJS 从控制器更改 ng-view 中的视图

AngularJS change view in ng-view from a controller

html

javascript

angularjs

office-app

ng-view