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();
};

我已创建了一个可以在此处找到的代码：

https://plnkr.co/edit/MP4Pp4WLcn5EFb3pTEXx

Answer 1

通过＆＃34;模板＆＃34;如果你在谈论projects模板。这是你需要做的。

说明：

项目模板只需要一个根元素，因此我添加了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 service

说明：

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

$timeout

Working Plunker：https://plnkr.co/edit/U3DDH57nh0Mqlpp2Txi4?p=preview

希望这有帮助！

Answer 2

更改projects.js中的以下代码

angular.module('portfolioApp')
     .directive('projects', function() {
       return {
        templateUrl: 'projects.html',
        controller: 'mainCtrl',
        replace: true // remove directive tags
        };
    });

到

replace: false

它应该做的伎俩。 Plunker Link here

Angular按钮的问题

2 个答案: