> ng-attr-<attrName>

对有条件声明 HTML 属性的支持包含在 Angular 中，作为动态标题的 ng-attr-<attrName> 指令。

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 和 "" 。请注意通常为假的值如何产生意外的结果。

感谢杰森的建议。我在这里采取了不同的方法。由于我不想更改"scope"变量，因此我使用"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'
                });
            }
        }
    }
});

网页代码：

<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（）。

不确定这是否正确。 寻找想法。

无法直接从元素中添加或删除属性。 但是，您可以创建一个指令，该指令只是在满足条件时将属性添加到元素中。 我把一些东西放在一起来说明这种方法。

演示：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
   }
}

我使用了不同的方法，因为前面的例子对我不起作用。 也许这与使用自定义指令有关？ 也许有人可以澄清这一点。

在我的特定示例中，我使用的是 ui-grid，但并非所有 ui-grid 都应该使用分页。 我传入一个"分页"属性，然后根据真/假$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
        // ...
    }
}