使用 AngularJS 加载部分答案

【问题标题】：Loading Partials with AngularJS使用 AngularJS 加载部分
【发布时间】：2018-06-14 07:32:36
【问题描述】：

我想在需要时加载我的部分？例如，我有一个包含 6 个缩略图的局部，当单击其中一个时它会加载我的局部，请告诉我？

【问题讨论】：

默认行为是在点击特定 url 之前不加载部分。
如果您只是查看浏览器控制台网络选项卡，您就会知道
您似乎对您要做什么或要问什么有点摸不着头脑。 Angular 是一个客户端应用程序框架。不是另一个jquery。考虑遵循与您的问题相关的角度教程，尤其是关于路由和多视图的教程：docs.angularjs.org/tutorial/step_07

【解决方案1】：

您需要使用路由来执行此操作。这是tutorial，但基本设置是这样的：

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 中定义的部分。

当然，您还必须在控制器中定义行为，但这应该可以帮助您开始基本路由。

【讨论】：

介意评论否决票？这不回答问题吗？这不是我抄袭教程，我链接了它