56

画像のドラッグをサポートするために「ドラッグ可能」ディレクティブを使用しています。ただし、ユーザーの役割に応じて、特定のユーザー グループに対して画像のドラッグを無効にする必要があります。次のコードを使用しました。

<!--draggable attribute is used as handle to make it draggable using jquery event-->           
<li  ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">            
<!-- Images and other fields are child of "li" tag which can be dragged.-->                    
</li>

メソッドdragSupportedはテンプレート スコープ内にあり、trueまたはを返しますfalse。によって返される各値<li>を使用して、2 つの大きな重複要素を作成したくありません。つまり、これを解決するための次のアプローチを探しているわけではありません。ng-ifdragSupported()

<!--draggable attribute is used as handle to make it draggable using jquery event-->           
<li ng-if="dragSupported() ==true"  ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">            
<!-- Images and other fields are child of "li" tag which can be dragged.-->                    
</li>
<!--remove "draggable" directive as user doesn't have permission to drag file -->
<li ng-if="dragSupported() !=true"  ng-repeat="template in templates"  id="{{template._id}}" type="template" class="template-box">            
<!-- Images and other fields are child of "li" tag which can be dragged.-->                    
</li>

コードの重複を回避する他の方法はありますか?

4

4 に答える 4

58

ng-attr-<attrName>

HTML 属性を条件付きで宣言するためのサポートは、動的タイトル付きng-attr-<attrName>ディレクティブとして Angular に含まれています。

の公式ドキュメントng-attr

例

あなたの場合、コードは次のようになります。

<li
    id="{{template._id}}"
    class="template-box"
    type="template"
    ng-repeat="template in templates"
    ng-attr-draggable="dragSupported() === true"
></li>

デモ

JSFiddle

trueこれには、false、undefined、null、1、0、およびの値の使用例が含まれています""。通常は誤った値が予期しない結果をもたらす可能性があることに注意してください。

于 2014-10-01T18:32:03.157 に答える
6

提案してくれたジェイソンに感謝します。ここでは少し異なるアプローチを取りました。「スコープ」変数を変更したくないので、「attrs」を使用してドラッグが許可されているかどうかを確認しました。以下は、これまでのところ良いと思われるアプローチ I ツールです。

指令コード:

app.directive('draggable', function () {
    return {
        // A = attribute, E = Element, C = Class and M = HTML Comment
        restrict: 'A',
        replace:true,
        link: function (scope, element, attrs) {

            if(attrs.allowdrag =="true")
            {
                element.draggable({
                cursor: 'move',
                helper: 'clone',
                class:'drag-file'
                });
            }

        }
    }
});

HTML コード:

<ul> 
         <!--draggable attribute is used as handle to make it draggable using jquery event-->           
        <li  ng-repeat="template in templates" draggable allowdrag="{{userHasPrivilege()}}" >            
                <!--Ohter code part of li tag-->                   

        </li> 

</ul>

コントローラーには userHasPrivilege() が実装されています。

これが正しい方法かどうかはわかりません。思考を探しています。

于 2013-09-15T20:23:48.373 に答える
3

要素から属性を直接追加または削除する方法はありません。ただし、条件が満たされたときに要素に属性を追加するだけのディレクティブを作成できます。アプローチを説明するものをまとめました。

デモ: http://jsfiddle.net/VQfcP/31/

指令

myApp.directive('myDirective', function () {
  return {
    restrict: 'A',
    scope: {
        canDrag: '&'
    },
    link: function (scope, el, attrs, controller) {
        /*
$parent.$index is ugly, and it's due to the fact that the ng-repeat is being evaluated 
first, and then the directive is being applied to the result of the current iteration      
of the repeater.  You may be able to clean this by transcluding the repeat into the 
directive, but that may be an inappropriate separation of concerns. 
You will need to figure out the best way to handle this, if you want to use this approach.  
  */
        if (scope.canDrag&& scope.canDrag({idx: scope.$parent.$index})) {
            angular.element(el).attr("draggable", "draggable");
        }
    }
  };
});

HTML

<ul>
    <!-- same deal with $parent -->
    <li ng-repeat="x in [1, 2, 3, 4, 5]" my-directive="true" can-drag="checkPermissions(idx)">{{$parent.x}}</li>
</ul>

コントローラ

function Ctl($scope) {
   $scope.checkPermissions = function(idx) {
     // do whatever you need to check permissions
     // return true to add the attribute
   }
}
于 2013-09-14T05:40:10.133 に答える
0

前の例がうまくいかなかったため、別のアプローチを使用しました。おそらく、カスタム ディレクティブの使用と関係があるのでしょうか? おそらく誰かがそれをクリアすることができます。

私の特定の例では、ui-grid を使用していますが、すべての ui-grid がページネーションを使用する必要があるわけではありません。「ページ分割された」属性を渡し、true/false に基づいてディレクティブを $compile します。かなり野蛮に思えますが、うまくいけば、人々を前向きな方向に押し上げることができます.

HTML

<sync-grid service="demand" paginated="true"></sync-grid>

指令

angular
    .module('app.directives')
    .directive('syncGrid', ['$compile', SyncGrid]);

function SyncGrid($compile){
    var nonPaginatedTemplate = '' +
        '<div>' +
        '   <div ui-grid="gridOptions" class="grid"></div>' +
        '</div>';

    var paginatedTemplate = '' +
        '<div>' +
        '   <div ui-grid="gridOptions" class="grid" ui-grid-pagination></div>' +
        '</div>';


    return {
        link: link,
        restrict: 'E',
        replace: true
    };

    function link(scope, element, attrs) {

        var isPaginated = attrs['paginated'];

        var template = isPaginated ? paginatedTemplate : nonPaginatedTemplate;
        var linkFn = $compile(template);
        var content = linkFn(scope);
        element.append(content);

        // Continue with ui-grid initialization code
        // ...

    }
}
于 2016-06-21T14:12:31.937 に答える