假设你正在使用路由:
// bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
});
...
在html中,当单击按钮时,您希望导航到关于页面。一种方法是
<a href="#/about">
... 但是ng-click似乎在这里也很有用。
这个假设正确吗?用ng-click代替anchor?
如果是的话,它是如何运作的呢?即:
<div ng-click=“/about”>
使用自定义属性(用指令实现)可能是最简洁的方法。这是我的版本,基于@Josh和@sean的建议。
angular.module('mymodule', [])
// Click to navigate
// similar to <a href="#/partial"> but hash is not required,
// e.g. <div click-link="/partial">
.directive('clickLink', ['$location', function($location) {
return {
link: function(scope, element, attrs) {
element.on('click', function() {
scope.$apply(function() {
$location.path(attrs.clickLink);
});
});
}
}
}]);
它有一些有用的特性,但我是Angular的新手,所以可能还有改进的空间。
路由监视$location服务并响应URL的更改(通常通过散列)。要“激活”路由,只需更改URL。最简单的方法就是使用锚标记。
<a href="#/home">Go Home</a>
<a href="#/about">Go to About</a>
不需要更复杂的了。然而,如果你必须从代码中完成,正确的方法是使用$location服务:
$scope.go = function ( path ) {
$location.path( path );
};
例如,一个按钮可以触发:
<button ng-click="go('/home')"></button>