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

Question

我的 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 列表中，我知道那会起作用。但是这里有其他选择吗？（让我用一个属于下拉的指令来完成这两个要求`

或者正确的做法是什么？

Answer 1

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

不过，作为最佳实践，更喜欢通过在指令定义上设置 bindToController: true 来将属性绑定到 crontroller。

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

Answer 2

您甚至不需要为此创建一个简单的切换按钮的指令。

您可以使用 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"  >

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

How to get the `data` from other `ng-repeat` element to current element directive

jquery

angularjs

angular-directive