AngularJS 从控制器更改 ng-view 中的视图
AngularJS change view in ng-view from a controller
我有一个 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”,但没有任何效果。
我做错了什么,视图没有改变并且页面没有导航?
我推荐使用
$window.location = "#/"
但不要忘记将 $window 注入您的控制器
在Page2Controller
中定义行为,例如:
$scope.goBack = function(){
$location.path("#/");
}
并在 Page2.html
中添加一些按钮:
<button ng-click="goBack()">Return</button>
您可能还需要将导航链接 href
属性更改为 #/page2
和 #/page3
我有一个 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”,但没有任何效果。
我做错了什么,视图没有改变并且页面没有导航?
我推荐使用
$window.location = "#/"
但不要忘记将 $window 注入您的控制器
在Page2Controller
中定义行为,例如:
$scope.goBack = function(){
$location.path("#/");
}
并在 Page2.html
中添加一些按钮:
<button ng-click="goBack()">Return</button>
您可能还需要将导航链接 href
属性更改为 #/page2
和 #/page3