Question

我的角度应用程序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

你甚至不需要一个指令来创建一个简单的切换按钮。

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

Answer 2

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

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

所有这些信息均可在docs。

中找到

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

2 个答案: