ng-clickは、最初のクリックではスクロール先ディレクティブを有効にしませんが、2番目のクリックでは有効になりますか？

私はng-clickに1つの質問を非表示にして別の質問を表示するのに問題があります。ng-clickは、最初のクリックではスクロール先ディレクティブを有効にしませんが、2番目のクリックでは有効になりますか？

セットアップはかなり簡単です。私はng-show="group"ともう1つのng-show="!group"を使って、1つの質問に対して2つの答えを返します。同じHTMLセクションに2つのボタンがあり、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

コードを見ることができない場合、 'scroll-to'を修正することはできません。質問を編集して、その指令のコードを含めてください。 – georgeawg

質問をPlunkerリンクで更新しました。 – machina

DOM要素の一部のサブツリーを表示または非表示にするには、ng-showディレクティブを使用します。以下は、それがどのように行われるかの例を見ることができます（第2章を参照）。また、scroll-to指示文を追加して、ng-clickと一緒に動作する方法を説明しました。ボタンをクリックすると、それを表示した後、2番目のセクションにスクロールします。

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は、最初のクリックではスクロール先ディレクティブを有効にしませんが、2番目のクリックでは有効になりますか？

答えて

関連する問題