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

我遇到了一些麻烦，让ng-click隐藏一组问题，但要显示另一个问题。

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

这是我的代码的片段：

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

Plunker中更新代码。似乎从app.js中删除" nganimate"解决了问题。现在单击"水果"会滚动到"您最喜欢的水果颜色是什么？"然后单击"蔬菜"会滚动到"您最喜欢的蔬菜颜色是什么？"。

显示或隐藏您可以使用ng-show指令的DOM元素的某些子树。您可以在下面看到一个如何完成的示例（请参阅第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>

相关内容

最新更新

热门标签：