[英]Angular 1.6.x: how to redirect from one controller to homepage using ng-click?
I have a contact page
and there is a home btn
on that page. 我有一个
contact page
, contact page
有一个home btn
。 I want to redirect it from contact page
to home page
using ng-click. 我想使用ng-click将其从
contact page
重定向到home page
。
below is the code for respective pages. 以下是各个页面的代码。
contact.html
<div ngController="contactController">
<div class="heading text-center">
<h1>Contact Us</h1>
</div>
<div>
<form class="needs-validation" novalidate>
<div class="form-group row">
<label for="validationTooltip01" class="col-sm-2 col-form-label">Name</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipName" placeholder="Name" required>
<div class="invalid-tooltip">
Please enter your full name.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltipEmail" class="col-sm-2 col-form-label">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
</div>
<input type="email" class="form-control" id="validationTooltipEmail" placeholder="Email"
aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a valid email.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltip03" class="col-sm-2 col-form-label">Query</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipQuery" placeholder="Query" required>
<div class="invalid-tooltip">
Please write your Query.
</div>
</div>
</div>
<div class="btn-group offset-md-5">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn btn-default" type="button" id="homebtn" ng-click="home()">Home</button>
</div>
</form>
</div>
</div
contact.component.js
angular.module('myApp')
.component('contactComponent', {
restrict: 'E',
scope: {},
templateUrl:'contact/contact.html',
controller: contactController,
controllerAs: 'vm',
// bindings:{
// information:'='
// }
});
function contactController() {
};
app.js
var app = angular.module('myApp', ['ui.router']);
app.controller('mainCtrl',function(){
});
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('dashboard', {
url: '/dashboard',
component: 'dashboardComponent'
})
.state('contact', {
url: '/contact',
component: 'contactComponent'
})
.state('about', {
url: '/about',
component: 'aboutComponent'
})
}]);
Use 采用
<button class="btn btn-default" type="button" id="homebtn" ng-click="navigate ('home')">Home</button>
and in controller, 在控制器中
$scope.navigate = function(routeName){
$state.go(routeName)
};
I noticed you have written 我注意到你写了
ngController="contactController"
ngController =“ contactController”
It should be 它应该是
<div ng-controller="contactController">
After that change your contactController as following. 之后,按如下所示更改您的contactController 。 Put it after module initialization.
将其放在模块初始化后。
app.controller('contactController', ['$scope', '$state', function ($scope, $state) {
$scope.home = function () {
$state.go('home');
};
}]);
I finally got it working. 我终于让它工作了。
function contactController($scope, $state) {
$scope.navigate = function(home){
$state.go(home)
};
};
I was missing $scope as a parameter inside my controller function. 我在控制器函数中缺少$ scope作为参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.