AngularJSのさまざまな要素をホバリングするとdiv内に異なるコンテンツが表示される

私はAngularJSには新しく、ディレクティブで作業するのに少し問題があります。AngularJSのさまざまな要素をホバリングするとdiv内に異なるコンテンツが表示される

現在、ナビゲーションメニューに取り組んでおり、達成しようとしているのは.services-contentの中にのメニュー内にliのホバーを置くと表示されます。また、.services-contentは、どの要素がホバリングされているかに応じて背景色が変化します。背景色の部分が機能していますが、各項目のカスタムコンテンツをどのように表示するかわかりません。

私のhtml：

<div class="page-navigation row"> 
<div class="col-sm-4"> 
    <!-- Some content here --> 
</div> 
<div class="col-sm-4"> 
    <h6>Navigation</h6> 
    <nav> 
     <ul class="list-unstyled nav-list"> 
      <!-- Here is my directive --> 
      <li class="services" showcontentonhover> 
       <ul class="list-unstyled"> 
        <li> 
         <a href="fi.html">Go to Fi</a> 
        </li> 
        <li> 
         <a href="fa.html">Go to Fa</a> 
        </li> 
        <li> 
         <a href="fo.html">Go to Fo</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <!-- some other link --> 
      </li> 
      <li> 
       <!-- some other link --> 
      </li> 
      <li> 
       <!-- some other link --> 
      </li> 
     </ul> 
    </nav> 
</div> 
<div class="col-sm-4 services-content"> 
    <!-- I want my content to be here! --> 
    <p>Different paragraph for each li in .services</p> 
    <a href="foo">This anchor item should have the same href that the hovered element</a> 
</div>

と私のディレクティブ：私が調査してきたように、私はこれは、ディレクティブのテンプレートを作成するか、おそらくtranscludeを使用して関連していると思う

app.directive('showcontentonhover', 
function() { 
    return { 
     restrict: 'A', 
     link : function($scope, element, attrs) { 
      var el = element.find('li'); 

      el.bind('mouseenter', function() { 
       $(this).siblings().removeClass('active-nav'); 
       $(this).addClass('active-nav'); 
      }); 

      el.eq(0).bind('mouseenter', function() { 
       $('.services-content').css('background-color', '#14202B'); 
       // Something should happen here that modifies the content of .services-content 
      }); 
      el.eq(1).bind('mouseenter', function() { 
       $('.services-content').css('background-color', '#1858a5'); 
       // Something should happen here that modifies the content of .services-content 
      }); 
      el.eq(2).bind('mouseenter', function() { 
       $('.services-content').css('background-color', '#2196F3'); 
       // Something should happen here that modifies the content of .services-content 
      }); 
     } 
    } 
});

正直なところ、私はちょっと失ってしまった。私は現在、AngularJSにdirectiveと事前

出典

2016-05-09 Osman Cea

使用scopeと=（双方向のデータバインディング）で1.5.3

感謝を使用しています。例メイド

：私はdivの内側に、より複雑な構造を必要とするので、おかげでチームメイト

var app = angular.module('app',[]) 
 
    .directive('showcontentonhover',function() { 
 
     return { 
 
      restrict: 'A', 
 
      scope:{ 
 
       contentModel:'=' 
 
      }, 
 
      link : function($scope, element, attrs) { 
 
       var el = element.find('li'); 
 

 
       el.bind('mouseenter', function() { 
 
        $(this).siblings().removeClass('active-nav'); 
 
        $(this).addClass('active-nav'); 
 
       }); 
 

 
       var data = [ 
 
        { 
 
         bg:'#14202B', 
 
         content:'content changed ....' 
 
        }, 
 
        { 
 
         bg:'#1858a5', 
 
         content:'Another content value....' 
 
        }, 
 
        { 
 
         bg:'#2196F3', 
 
         content:'Yet another content....' 
 
        } 
 
       ]; 
 

 
       angular.forEach(el,function(val,index){ 
 
        angular.element(val).bind('mouseenter', function() { 
 
         $('.services-content').css('background-color', data[index].bg); 
 
         $scope.$apply(function(){ 
 
          $scope.contentModel.text = data[index].content; 
 
         }); 
 
        }); 
 
       }); 
 
      } 
 
     } 
 
    });

<html ng-app='app'> 
 
<head> 
 
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> 
 
    <script src="//cdn.bootcss.com/angular.js/1.5.3/angular.js"></script> 
 
</head> 
 
<body> 
 
    <div class="page-navigation row" ng-init=" contentModel={text:''} "> 
 
     <div class="col-sm-4"> 
 
      <!-- Some content here --> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <h6>Navigation</h6> 
 
      <nav> 
 
       <ul class="list-unstyled nav-list"> 
 
        <!-- Here is my directive --> 
 
        <li class="services" showcontentonhover content-model="contentModel"> 
 
         <ul class="list-unstyled"> 
 
          <li> 
 
           <a href="fi.html">Go to Fi</a> 
 
          </li> 
 
          <li> 
 
           <a href="fa.html">Go to Fa</a> 
 
          </li> 
 
          <li> 
 
           <a href="fo.html">Go to Fo</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <!-- some other link --> 
 
        </li> 
 
        <li> 
 
         <!-- some other link --> 
 
        </li> 
 
        <li> 
 
         <!-- some other link --> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
     <div class="col-sm-4 services-content"> 
 
      <!-- I want my content to be here! --> 
 
      <div ng-bind="contentModel.text"></div> 
 
      <p>Different paragraph for each li in .services</p> 
 
      <a href="foo">This anchor item should have the same href that the hovered element</a> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-05-09 17:13:46

は...私はいくつかのHTMLマークアップとcontentModel.textを適応させるつもり試みです別のケースごとに、もう一度感謝します=） –

AngularJSのさまざまな要素をホバリングするとdiv内に異なるコンテンツが表示される

答えて

関連する問題