javascript - 在 Angular JS 中单击按钮时将 View 从一个页面切换到另一页面

Question

我是 Angular 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');

//按钮点击时重定向 函数 Cntrl ($范围,$位置) { $scope.redirect = 函数(){ window.location.href = '/about'; } }

});

app.controller('ContactCtrl', function($scope, $compile) { console.log('内部接触 Controller ');

});

我的 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可以更好地处理这种情况