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

时间:2015-10-02 13:38:35

标签: javascript html angularjs ng-view office-app

我有一个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”,但没有任何效果。

我做错了什么,视图没有改变,页面没有导航?

2 个答案:

答案 0 :(得分:1)

我建议使用

$window.location = "#/"

但不要忘记向你的控制器注入$ window

答案 1 :(得分:0)

Page2Controller中定义行为,例如:

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

Page2.html内添加一些按钮:

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

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