角度按鈕的問題

我正在創建我的第一個Angular應用程序，遇到了一些我無法弄清楚的事情。每當我有這樣的：角度按鈕的問題

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

裏面我的模板應用程序拒絕加載，但如果我貼吧模板以外的任何位置，它工作正常的。如果可能，我想將按鈕放在模板中，那麼我究竟做了什麼錯？

另外，我想這個按鈕也滾動到#footer的DIV和NG-點擊似乎並沒有運行該位代碼：

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

我創建的Plunker我代碼可以在這裏找到：

https://plnkr.co/edit/MP4Pp4WLcn5EFb3pTEXx

來源

2016-03-08 doitliketyler

模板內部，在哪裏？ –

通過的「模板」，如果你是在談論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任何格所以我加了一個僅低於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

希望這有助於！

來源

2016-03-08 05:06:48

真棒。這有助於很多。我甚至不想添加超時。謝謝戴夫。 – doitliketyler

歡迎我的朋友！保持你正在做的令人敬畏的工作:) –

變化下面的代碼在projects.js

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

到

replace: false

它應該做的伎倆。 Plunker鏈接here

來源

2016-03-08 05:58:46

角度按鈕的問題

回答

相關問題