Question

我对AngularJS很新，我在使用指令方面遇到了一些麻烦。

我现在在导航菜单上工作以及我想要实现的目标是，只要我将.services-content悬停在li内，就会在.services内显示不同的信息1}}菜单。此外，.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>

和我的指示：

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
            });
        }
    }
});

正如我一直在调查的那样，我认为这与创建指令模板或者使用transclude有关，但老实说，我现在有点丢失了。我目前正在使用AngularJS 1.5.3

提前致谢

Answer 1

将scope和=（双向数据绑定）与directive一起使用。

举个例子：

＆＃13;

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;
                        });
                    });
                });
            }
        }
    });

＆＃13;

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

＆＃13;

将鼠标悬停在AngularJS中的不同元素上时，在div中显示不同的内容

1 个答案: