2

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

截屏

要走的路是指令性的，我试图修改一个以适应这种情况。我不清楚的是我将如何一次只限制一组图标。

在 Jquery 中它相当简单，所有图标集都有作为图标集的类，所以你做了 $(".icon-set").hide() 并且它会隐藏所有图标，并且在需要时，即点击 chevron 显示图标。

在角度的情况下，我有多个问题。我创建了这个列表

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

      }
   }
})

编辑：我可以解决不工作的问题，我感到困惑的是如何让它只显示一个图标集。编辑：修正错字

4

2 回答 2

1

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

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

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

<div class=\"options-box\">然后像这样向你的元素添加一个 ng-hide 属性：

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

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

scope: {
    showOption = function() { return ... }
}
于 2013-08-29T09:52:24.613 回答
1

首先，您想使用模板而不是link连接 HTML。包括一个看起来像这样的模板：

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

如果为真，该ng-if指令只会在 DOM 中包含此 DIV 。showContent这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()从孩子那里调用。

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

祝你好运，布赖恩

于 2013-08-29T10:08:16.767 回答