如何从其他`ng-repeat`元素获取`data`到当前元素指令

Posted 2023-02-22

【中文标题】如何从其他`ng-repeat`元素获取`data`到当前元素指令

【英文标题】：How to get the `data` from other `ng-repeat` element to current element directive

【发布时间】：2015-11-01 15:46:30

【问题描述】：

我的 Angular 应用程序有一个 dropdown。当一个元素被点击时，我会显示一个ul 和li 的内容。 （由ng-repeat制作）

但是使用dropdown directive 可以从那里获取scope 对象。我对处理这种情况感到有些困惑，请任何人帮助我？

这是我的html：

<div class="dropDownHeader">

                <h3 class="mainProjselected">
                    <span class="projectName"> 
                        <a ng-href="/" class="homeBtn"></a>
                        project.Name
                    </span>
                    <span class="dropDown dirDropDown"></span><!-- directive when this button is clicked i am shonwing mainProjects list -->
                </h3>
                <ul class="mainProjects">
                    <li ng-repeat='project in project.Projects' data="project" > project.Name </li> //i required the project data to dropdown.
                </ul>

            </div>

这是我的指令：

var dirDropDown = function () 

    return 

        restrict : 'C',

        scope : 

            data:'=' //how can i get data from `li`

        ,

        link : function ( scope, element, attrs ) 

           //here the element is dropdown.

            var dropDownUL = element.parent().siblings('ul');

            element.on('click', function () 

                dropDownUL.show();
                scope.$apply();

            );

            dropDownUL.on('click', 'li', function ( target ) 

                //i can able to click on `li` - but how to get the `project' as data here?

            )



        

    



angular.module("tcpApp")
    .directive("dirDropDown", dirDropDown); 

我不知道如何处理。如果我将单独的directive 写到li 列表中，我知道那会起作用。但是这里有替代方案吗？ （让我用一个属于下拉的指令来满足这两个要求`

或者这样做的正确方法是什么？

【参考方案1】：

你真的不需要为此创建一个简单的切换按钮的指令。

您可以使用ng-click 和ng-show 做到这一点：

<span class="dropDown" ng-click="toggleList = !toggleList"></span>
<ul class="mainProjects" ng-show="toggleList">

然后你也可以为列表项添加相同的东西

<li ng-repeat='project in project.Projects' data="project"
    ng-click="scopeFunction(project);toggleList = !toggleList"  >

【参考方案2】：

scope 属性中声明的所有变量都将在您的范围内可用，因此scope.data 应该为您提供所需的项目。

不过，作为最佳实践，最好将属性绑定到 cronroller，方法是在指令定义上设置 bindToController: true。

所有这些信息都可以在docs 中找到。