Question

我已经在我们的网站中实现了路由，我已经正确链接了所有href与控制器，但是我不明白为什么控制器不启动，请检查我的小提琴代码并告诉我代码有什么问题？

var app = angular.module("angularDemoApp", ["ngRoute"]);
app.config(function($routeProvider) {

$routeProvider.when('/Family', {
    templateURL : 'Family.html',
    controller  : 'familyController'
  }).when('/Friends',{
    templateURL : 'Friends.html',
    controller  : 'friendsController'
  }).when('/Photo', {  
    templateURL : 'Photo.html',
    controller  : 'photoController'
  })
})

app.controller('familyController', function($scope) {
  $scope.msg = "hiii homeee";
});
app.controller('friendsController', function($scope) {
  alert('ssss');
  $scope.friendsMsg = "hiii friendsMsg";
});
app.controller('photoController', function($scope) {
  alert('ssss');
  $scope.photoMsg = "hiii photoMsg";
})

<ul class="nav nav-pills nav-stacked">
  <li>
    <a href="#/Family">Family</a>
   </li>
 <li>
    <a href="#/Friends">Friends</a>
  </li>
  <li>
    <a href="#/Photos">Photos</a>
   </li>
</ul>

Answer 1

如果您使用的是1.6版本以上的角度版本，则路由将从＃/ state更改为＃！/ state

演示

var app = angular.module("angularDemoApp", ["ngRoute"])
app.config(function($routeProvider) {

$routeProvider.when('/Family', {
    template: `<h1>{{msg}}</h1>`,
    controller  : 'familyController'
  }).when('/Friends',{
    template: `<h1>{{friendsMsg}}</h1>`,
    controller  : 'friendsController'
  }).when('/Photo', {  
    template: `<h1>{{photoMsg}}</h1>`,
    controller  : 'photoController'
  })
})

app.controller('familyController', function($scope) {
  $scope.msg = "hiii homeee";
});
app.controller('friendsController', function($scope) {
  alert('ssss');
  $scope.friendsMsg = "hiii friendsMsg";
});
app.controller('photoController', function($scope) {
  alert('ssss');
  $scope.photoMsg = "hiii photoMsg";
})

<!DOCTYPE html>
<html ng-app="angularDemoApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS User Registration and Login Example  </title>
</head>

<body>
  
  <ul class="nav nav-pills nav-stacked">
  <li>
    <a href="#!/Family">Family</a>
   </li>
 <li>
    <a href="#!/Friends">Friends</a>
  </li>
  <li>
    <a href="#!/Photos">Photos</a>
   </li>
</ul>
  <div class="mainContainer" ng-view></div>
  <script src="//unpkg.com/angular@1.6/angular.js"></script>
  <script src="//unpkg.com/angular-route@1.6/angular-route.js"></script>
</body>

</html>

单击链接后未触发Angularjs路由问题控制器？

1 个答案: