ng-click不会在第一次点击时激活滚动指令指令，而是第二次？

我在收到ng-click以隐藏一组问题但显示另一组问题时遇到了一些麻烦。ng-click不会在第一次点击时激活滚动指令指令，而是第二次？

设置非常简单。对于一个问题，我有两个答案，一个答案使用ng-show="group"，另一个答案是ng-show="!group"。我在同一个HTML部分使用ng-click来设置"group = true"和"group = false"中的两个按钮。但是，当我第一次单击第一个按钮时，ng-click未激活我的scroll-to指令。但是，当我再次单击它时，它确实执行scroll-to。

这里是我的代码片段：在Plunker

<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>

更新后的代码。看来，从app.js中删除“ngAnimate”解决了这个问题。现在点击“水果”会滚动到“你最喜欢什么颜色的水果？”点击“蔬菜”会滚动到“你最喜欢什么颜色的蔬菜？”。

来源

2017-02-26 machina

你能张贴到目前为止你试图进入plunker什么？ – JohnD

如果我们看不到代码，我们无法帮助您解决“滚动到”问题。请编辑问题以包含该指令的代码。 – georgeawg

更新Plunker链接的问题。 – machina

要显示或隐藏DOM元素的某个子树，您可以使用ng-show指令。下面你可以看到一个如何完成的例子（见第2节）。另外，我添加了scroll-to指令来说明它如何与ng-click一起工作。显示后点击该按钮将滚动到第二部分。

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>

来源

2017-02-26 08:43:27 Vadim

感谢您的回答。我只是在app.js中包含“scrollto”，它工作。这里是Plunker，https://plnkr.co/edit/hzttrgHoOyjb44gAzl5m?p=preview。 – machina

ng-click不会在第一次点击时激活滚动指令指令，而是第二次？

回答

相关问题