Question

我是角度JS的新手。如果点击按钮，我可以重定向到另一个页面。我的代码在这里

var app = angular.module("plunker", [])
.config(function ($routeProvider, $locationProvider, $httpProvider) {

$routeProvider.when('/home',
{
  templateUrl:    'home.html',
  controller:     'HomeCtrl'
});
$routeProvider.when('/about',
{
  templateUrl:    'about.html',
  controller:     'AboutCtrl'
});
$routeProvider.when('/contact',
{
  templateUrl:    'contact.html',
  controller:     'ContactCtrl'
});
$routeProvider.otherwise(
{
  redirectTo:     '/home',
  controller:     'HomeCtrl', 
}

）; }）;

app.controller('NavCtrl', 
['$scope', '$location', function ($scope, $location) {  
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'home';
return page === currentRoute ? 'active' : '';
};
   }]);

app.controller('AboutCtrl', function($scope, $compile) {
console.log('inside about controller');


});

app.controller('HomeCtrl', function($scope, $compile) {
console.log('inside home controller');

//单击按钮时重定向 function Cntrl（$ scope，$ location）{ $ scope.redirect = function（）{ window.location.href ='/ about'; } }

}）;

app.controller（'ContactCtrl'，function（$ scope，$ compile）{ console.log（'内部联系控制器'）;

}）;

我的html标记是

<div ng-controller="Cntrl">
    <button class="btn btn-success" ng-click="changeView('about')">Click Me</button>
</div>

您输入了：

如何得到这个。帮助我解决这个问题。

Answer 1

只需使用标准HTML链接：

<div ng-controller="Cntrl">
    <a class="btn btn-success" ng-href="#/about">Click Me</a>        
</div>

无需为此创建范围函数。您也可以通过ng-href动态处理它：

<div ng-controller="Cntrl">
    <a class="btn btn-success" ng-href="#/{{view}}">Click Me</a>        
</div>

最后，你应该考虑使用ui-router处理更好的情况

Answer 2

为什么需要将视图作为参数发送：

试试这个：

$scope.changeView = function() {
            $location.path(#/about); 
        }

Answer 3

如果Cétia提供的解决方案不起作用，那么您可能没有定义路线。确保使用这样的app.js定义路线：

  app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/Login', {
                templateUrl: 'Navigate/LoginView',
                controller: 'someLoginController'
            })

]);

你也可以使用angulars州提供者（做一些研究），从州提供者那里你可以在html中访问你的路线：

<a href="state.routName" />

在角度JS中单击按钮时，将视图从一个页面切换到另一个页面

3 个答案: