Question

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

设置非常简单。我使用ng-show="group"和另一个ng-show="!group"对一个问题有两个答案，一个答案。我在同一个HTML部分中有两个按钮，使用ng-click来设置"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”修复了问题。现在点击“水果”将滚动到“你最喜欢的水果颜色是什么？”点击“蔬菜”将滚动到“您最喜欢的蔬菜颜色？”。

Answer 1

要显示或隐藏DOM元素的某些子树，您可以使用ng-show指令。您可以在下面看到如何完成的示例（请参阅第2节）。另外，我添加了/products/{productId}/generate-prices-map指令来说明它如何与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);
}

ng-click不会在第一次单击时激活scroll-to指令但第二次？

1 个答案: