ng-click doesn't activate scroll-to directive on first click but second?
Question
I'm having some trouble getting ng-click to hide one set of questions but show another.
The setup is fairly simple. I have two answers to one question with one answer using ng-show="group" and the other ng-show="!group" . I have two buttons in the same HTML section using ng-click to set "group = true" and "group = false" . However, when I click the first button for the first time, ng-click doesn't activate my scroll-to directive. However, when I click it a second time, it does perform scroll-to .
Here's a snippet of my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <section class="container-fluid" id="section1"> <h1>Favorite food?</h1> <div class="btn-toolbar"> <label class="btn btn-primary" scroll-to="#section2" ng-click="showSection2 = true; group = true; ProductFilterGroup = {group: 'fruits'}" uib-btn-radio>Fruits</label> <label class="btn btn-primary" scroll-to="#section2" ng-click="showSection2 = true; group = false; ProductFilterGroup = {group: 'vegetables'}" uib-btn-radio>Vegetables</label> </div> </section>
Updated code in Plunker . It seems that removing "ngAnimate" from the app.js fixed the problem. Now clicking "fruit" will scroll to "Whats your favorite color of fruit?" and clicking "vegetables" will scroll to "Whats your favorite color of vegetables?".
1 answers
solution1
0 ACCPTED 2017-02-26 08:43:27
To show or hide some subtree of DOM elements you may use ng-show directive. Below you can see an example of how it may be done (see section2). Also, I've added scroll-to directive to illustrate how it works together with ng-click . Clicking the button scrolls to second section after showing it.
angular.module('app', []) .controller('ctrl', [function() { this.showSection2 = false; this.group = false; }]) .directive('scrollTo', ['$location', '$anchorScroll', function($location, $anchorScroll) { return { restrict: 'A', scope: false, link: function(scope, el, attr) { el.on('click', function() { $location.hash(attr.scrollTo.substr(1)); $anchorScroll(); }) } }; }]);
section { min-height: 1000px; } aside { position: fixed; bottom: 0; right: 0; font-size: 1rem; background-color: rgba(255, 128, 128, 0.5); }
<!DOCTYPE html> <html ng-app="app"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="ctrl as vm"> <aside>Group: {{vm.group}}</aside> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget porta neque. Sed maximus molestie ex. Phasellus a blandit ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum pellentesque elit a tristique imperdiet. </p> <section class="container-fluid" id="section1"> <h1>Favorite food?</h1> <div class="btn-toolbar"> <label class="btn btn-primary" scroll-to="#section2" ng-click="vm.showSection2 = true; vm.group = true; vm.ProductFilterGroup = {group: 'fruits'}" uib-btn-radio>Fruits</label> <label class="btn btn-primary" scroll-to="#section2" ng-click="vm.showSection2 = true; vm.group = false; vm.ProductFilterGroup = {group: 'vegetables'}" uib-btn-radio>Vegetables</label> </div> </section> <p> Nulla purus mauris, mollis a aliquam efficitur, blandit vitae ante. Proin id nisi quam. Sed sit amet fermentum enim. Nunc pretium neque quis vulputate ultrices. Proin porttitor eget ligula ut gravida. Donec ut felis ex. Pellentesque a accumsan tortor. </p> <section class="container-fluid" id="section2" ng-show="vm.showSection2"> <h1>Favorite drink?</h1> <div class="btn-toolbar"> <label class="btn btn-primary" scroll-to="#section1">Cola</label> <label class="btn btn-primary" scroll-to="#section1">Soda</label> </div> </section> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.