javascript - Angular 按钮的问题

Question

我正在创建我的第一个 Angular 应用程序，遇到了一些我想不通的事情。每当我包括这个:

<button ng-hide="results.length === projects.length" ng-click="limit = limit +3; gotoBottom()">Show More</button>

在我的模板内，应用程序拒绝加载，但如果我将它粘贴到模板外的任何地方，它就可以正常工作。如果可能的话，我想将按钮保留在模板中，那么我究竟做错了什么？

此外，我希望该按钮也滚动到#footer div 并且 ng-click 似乎不运行此位代码:

$scope.gotoBottom = function() {
 $location.hash('footer');
 $anchorScroll();
};

我已经创建了我的代码的 Plunker，可以在这里找到:

https://plnkr.co/edit/MP4Pp4WLcn5EFb3pTEXx

Answer 1

如果您谈论的是项目 模板，则通过"template"。这是您需要做的。

Explanation:

项目模板只需要一个根元素，所以我添加了一个 div 来包装您的 project 列表和 show more 按钮。

<div>
  <div class="cards" ng-init="limit = 3">
    <div class="card" ng-repeat="project in projects | limitTo: limit as results">
      <div class="card-image">
        <img src="{{project.img}}" alt="{{project.name}}" />
      </div>
      <div class="card-copy">
        <h2>{{project.name}}</h2>
        <p>{{project.desc}}</p>
        <p><a href="{{project.url}}" target="_blank"><i class="fa fa-location-arrow"></i></a></p>
      </div>
    </div>
  </div>

  <button ng-hide="results.length === projects.length" ng-click="limit = limit +3; gotoBottom()">Show More</button>
  <div id="footer" name="footer"></div>
</div>

对于自动滚动:注入(inject) $timeout 服务

Explanation:

您没有任何名为 footer 的 div，所以我在 show more 按钮下方添加了一个，并添加了 100 毫秒超时，以便在您的 3 个项目加载后，它将滚动到 footer div。 $timeout 是非常必要的，因为需要先渲染你的项目然后滚动。

$scope.gotoBottom = function() {
  $timeout(function() {
    $location.hash('footer');
    $anchorScroll();
  }, 100);
};

工作 Plunker:https://plnkr.co/edit/U3DDH57nh0Mqlpp2Txi4?p=preview

希望这对您有所帮助!