用AngularJS加载局部

Loading Partials with AngularJS

本文关键字：加载局 AngularJS      更新时间：2023-09-26

我想加载我的部分时需要吗?例如，我有一个部分，其中包括6个缩略图，当点击一个它加载我的部分，请让我知道?

您需要使用路由来做到这一点。这里有一个教程，但基本的设置是这样的:

HTML -这将有几个<a>锚标记，每个锚标记包含各自的路由，如下所示:

  <ul class="phones">
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
      <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
      <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

然后你需要确保你设置你的应用程序使用ngRoute:

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);

然后在配置中设置routeProvider:

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

指示ng-repeat中的每个块使用templateUrl中定义的部分。

当然，你还必须在你的控制器中定义行为，但这应该让你开始基本的路由。

相关文章：