的index.html

Question

我编写了具有3个按钮的程序，如果我点击特定按钮，它应该重定向到app.js中提到的相应页面

我的要求是每个按钮应该有一个控制器，它应该正确重定向，它应该显示一个控制台消息，单击哪个按钮我正在共享我的代码，但它无法正常工作

的index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Test</title>

  <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

  <!-- Le javascript
    ================================================== -->
  <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js"></script>


  <script>var myItemsApp = angular.module('myItemsApp', ['ngRoute']);</script>

</head>

<body ng-app="myItemsApp">
  <div>
    <h3>Test</h3>
    <div class="row">
      <div class="col-md-4">

            <button href="/test1" ng-click="submit1()">Button1</button>
            <button href="/test2" ng-click="submit2()">Button2</button>
            <button href="/test3" ng-click="submit3()">Button3</button>


        </div>
      </div>
    </div>
  </div>
    <script src="app.js"></script>
</body>

  <script src="testcntrl.js"></script>

</html>

＃app.js

  myItemsApp.config(['$routeProvider',function($routeProvider) {

      $routeProvider

      .when('/test1', {
        templateUrl : 'test.html',
        controller  : 'button1Controller'
      })

       .when('/test2', {
        templateUrl : 'test1.html',
        controller  : 'button2Controller'
      })

        .when('/test3', {
        templateUrl : 'test2.html',
        controller  : 'button3Controller'
      })

       .otherwise({
           redirectTo: '/'

      });


}]);

testcntrl.js

myItemsApp.controller('button1Controller', ['$scope','$location', function($scope,location){


    $scope.submit1 = function() {

    console.log("I clicked on submit button1Controller");

    location.path('/test1');
    }

}]); 

myItemsApp.controller('button2Controller', ['$scope','$location', function($scope,location){


    $scope.submit2 = function() {

        console.log("I clicked on submit button2Controller ");

    location.path('/test2');
    }

}]); 


myItemsApp.controller('button3Controller', ['$scope','$location', function($scope,location){


    $scope.submit3 = function() {

        console.log("I clicked on submit button3Controller");

    location.path('/test3');
    }

}]);

test1.html

<h1>hello</h1>

Answer 1

您应该将ng-view添加到渲染模板。并在#。{/ p>中将url添加到href

当使用ng-click标记时，您也不需要<a>。并且您错误地将服务注入控制器。你应该注入$location而不是location

如果您要从网址中删除#，请启用html模式。

 <div class="col-md-4">

        <a href="#/test1" >Button1</a>
        <a href="#/test2" >Button2</a>
        <a href="#/test3" >Button3</a>


    </div>
    <div ng-view=""></div>
  </div>

Demo

Answer 2

你的想法没问题，它应该有效但是：

按钮不需要href。
您只需使用＃/ test1＃/ test2
如果您仍然需要这种方式，则需要另一个控制器＆＃34;主控制器＆＃34;

这可行：

// Code goes here
var myItemsApp = angular.module('myItemsApp', ['ngRoute']);
myItemsApp.config(['$routeProvider', function($routeProvider) {

  $routeProvider

    .when('/test1', {
    templateUrl: 'test1.html',
    controller: 'button1Controller'
  })

  .when('/test2', {
    templateUrl: 'test2.html',
    controller: 'button2Controller'
  })

  .when('/test3', {
    templateUrl: 'test3.html',
    controller: 'button3Controller'
  })

  .otherwise({
    redirectTo: '/'

  });


}]);



myItemsApp.controller('initialController', ['$scope', '$location', function($scope, location) {


  $scope.submit1 = function() {
    console.log("I clicked on submit button1Controller");
    location.path('/test1');
  }

  $scope.submit2 = function() {
    console.log("I clicked on submit button2Controller ");
    location.path('/test2');
  }

  $scope.submit3 = function() {
    console.log("I clicked on submit button3Controller");
    location.path('/test3');
  }
}]);

myItemsApp.controller('button1Controller', ['$scope', '$location', function($scope, location) {

}]);

myItemsApp.controller('button2Controller', ['$scope', '$location', function($scope, location) {

}]);


myItemsApp.controller('button3Controller', ['$scope', '$location', function($scope, location) {

}]);

Plunker demo

如何在angularjs中使用带有不同控制器的多个按钮进行重定向

的index.html

testcntrl.js

test1.html

2 个答案: