Angularjs指令

Question

我正在尝试将用html / jquery编写的旧应用程序移植到angularjs。场景是有一个列表，点击雪佛龙，它显示在它下面的一组图标（图片如下）

要走的路是指令，我试图修改一个以适应场景。我不清楚的是我如何一次只限制一组图标。

在Jquery中它非常简单，所有的图标集都有类作为图标集，所以你做了$（“。icon-set”）。hide（）它会隐藏所有图标，并在需要时点击雪佛龙展示了这些图标。

如果有角度，我有多个问题。我已创建此列表

 <ul class="list" ng-repeat="file in files| filter: { folder:'false' }" >
        <li class="list-main" >
            <ext-img file-name="{{file['file-name']}}"></ext-img>
            <div class="list-info">
                <div class="list-header">{{file['file-name']}}</div>
                <div class="list-info-bottom dimfont"><small>{{ file['modified-timestamp'] | date:'medium' }}</small></div>
            </div>
            <action-button class="chevron" id="{{file['file-path']}}/{{file['file-name']}}"></action-button>
        </li>

    </ul>

该指令不适用于element.bind（）（下面的代码） 以及如何仅为其中一个列表元素显示它。

myapp.directive('action-button',function(){
 return {
    restrict: 'E',
    template: {

    },
    link: function(scope,element,attrs){
        // This populates the options mene, Bind onclick event
        element.bind("click",function(){
            // Append the options to it.
            var str = '';
            str += "<div class=\"options-box\">" ;
            str += "<ul class=\"options-inner\">" ;
            str += "<li class=\"options-item\">" ;
            str += "<a href=\"#\" ng-click = \"\">" ;
            str += "<img class=\"options-img\" src=\"images/share_file.png\">" ;
            str += "<div>Share</div>" ;
            str += "</a>" ;
            str += "</li>" ;
            str += "</ul></div>";
        element.replaceWith(str);
       }
        )

      }
   }
})

编辑：我可以解决这个无法解决的问题，我很困惑的是如何让它只显示一个图标集。 编辑：修正了拼写错误

Answer 1

事实上，您正在使用angularjs，就像您正在使用Jquery一样。 这不是最好的方法，你不应该自己修改dom，而是使用模板。

要解决您的问题，您应该将str HTML代码移动到指令模板：

template: '<div class=...>'

然后将ng-hide属性添加到<div class=\"options-box\">元素中：

<div class=\"options-box\" ng-hide='showOption()'>

在范围内，您需要定义showOption过程：

scope: {
    showOption = function() { return ... }
} 

Answer 2

首先，您希望使用模板而不是link来连接HTML。包含一个如下所示的模板：

<div class="chevron" ng-click="toggle()"></div>
<div class="content" ng-if="showContent">
    <div class="options-box">
    etc...
</div>

如果ng-if为真，showContent指令将仅在DOM中包含此DIV。这与仅隐藏/显示内容的ng-hide和ng-show不同。

接下来，您需要在指令中使用控制器来定义toggle()和showContent

这将处理个别指令，但不会与其他指令通信。

要做到这一点，你有几个选择。

一种选择是使用$scope.$broadcast和$scope.$on来广播/接收消息。一个指令可以告诉所有其他指令在它显示之前隐藏。这类似于在展示个人之前使用$('.icon-set').hide()。

另一种选择是创建一个名为action-buttons的父指令，它负责添加action-button个孩子。它在其控制器中有一个名为hideAll()的函数，子指令将require: '^action-buttons'。这使得父控制器可以传递到链接函数link: function(scope, element, attrs, ActionButtonsCtrl，您可以在其中调用hideAll()。

您也可以使用继承的范围，但我建议不要采用这种方法。

祝你好运， 布赖恩