Question

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <script src="https://code.angularjs.org/1.7.2/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.7.2/angular-route.min.js"></script>
 </head>  
<body ng-app="myApp">
   <p><a href="#/">Main</a></p>
   <a href="#/london">City 1</a>
   <a href="#/paris">City 2</a>
   <div ng-view></div>

  <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
      $routeProvider
      .when("/", {
        templateUrl : "main.html"
      })
      .when("/london", {
        templateUrl : "london.html"
      })
      .when("/paris", {
        templateUrl : "paris.html"
      });
    });
  </script>
  </body>
</html>

当我单击链接时，看不到这些html页面的内容。我的链接无效。我认为问题是“ href”属性的内容。希望有人解决这个问题。

这是我注册模板的方式

angularJS(folder)
 　　　|
 　　　|ーindex.html
 　　　|ーmain.html
 　　　|ーlondon.html
 　　　|ーparis.html

所有模板都在相同的层次结构中

Answer 1

一种更可靠的方法如下。将以下内容插入到您希望显示城市数据的index.html中：

<div class='app-content' ui-view="main"></div>

在app.js中创建与该函数相似的函数：

var app = angular.module('app', [
    'paris'
]);

app.controller('AppCtrl', ['$scope', '$location', function AppCtrl($scope, $location) {

  $scope.go = function(path, data) {
    if(path === $location.path()) {
        $state.reload();
    } else {
        $scope.loading = true;
        $location.path(path).search({params: data});
    }
  };

}]);

在您的html

中按以下方式命名

 <a href="" ng-click="go('/paris')">City 2</a>

然后在您要访问的页面的控制器中，您既可以访问它，也可以按以下方式检索数据：

var paris = angular.module('paris', ['ui.router', 'ngSanitize']);

paris.config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('paris', {
    url: '/paris',
    views: {
      'main': {
        controller: 'parisCtrl',
        templateUrl: 'srcPath/paris.html'
      }
    }
  });
}]);

paris.controller('parisCtrl',['$scope', '$location', function ($scope, $location) {
  $scope.dataFromOtherPage = $location.search().params;
}]);

链接不适用于angularJS

1 个答案: