简体   繁体   English

Angular 1.6.x:如何使用ng-click从一个控制器重定向到首页?

[英]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 pagecontact 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM