Question

关于如何制作＆＃39; li＆＃39;我有一个小问题。＆lt; ul＆＃39;的元素列表可见但不可点击。我尝试使用ng-disabled指令禁用它，即不可点击但它似乎不起作用。请帮助我解决这个非常值得注意的问题。

Code Example (Plunker Link)

Answer 1

如果您只想阻止点击事件在li上注册，则可以实施此CSS规则：

li { pointer-events: none; }

如果您需要从Angular动态设置它，请考虑使用核心ngClass指令：

CSS：

.no-click { pointer-events: none; }

HTML：

<li ng-class="{'no-click': clickable}">No Touching!</li>

来源：

ngClass：https://docs.angularjs.org/api/ng/directive/ngClass
有关pointer-events的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
除IE之外的所有内容都得到合理支持：http://caniuse.com/#feat=pointer-events

Answer 2

你可以使用这个driective：

(function () {
    'use strict';

    angular
        .module('app.widgets')
        .directive('zzDisableClickIf', disableClickIf);


    function disableClickIf($parse, $rootScope) {
        // Usage:
        //      <li>
        //          <a ui-sref="somestate" zz-disable-click-if="!model.isValid()">Go Somestate</a>
        //      </li>
        return {
            // this ensure zzDisableClickIf be compiled before ngClick
            priority: 100,
            restrict: 'A',
            compile: function ($element, attr) {
                var fn = $parse(attr.zzDisableClickIf);
                return {
                    pre: function link(scope, element) {
                        var eventName = 'click';
                        element.on(eventName, function (event) {
                            var callback = function () {
                                if (fn(scope, { $event: event })) {
                                    // prevents ng-click to be executed
                                    event.stopImmediatePropagation();
                                    // prevents href
                                    event.preventDefault();
                                    return false;
                                }
                            };
                            if ($rootScope.$$phase) {
                                scope.$evalAsync(callback);
                            } else {
                                scope.$apply(callback);
                            }
                        });
                    },
                    post: function () { }
                }
            }
        }
    }

} ());

此指令停止if zz-disable-click-if='false'

的操作

Answer 3

＆＃13;

var app=angular.module("app",[])


app.controller("itemController",function($scope){
  $scope.condition=false;
  $scope.disableLink=function(){
    $scope.condition=!$scope.condition;
  }
  
});

＆＃13;

<html>
<style>
.not-active {
 pointer-events: none;
 cursor: default;
 color: #ddd;
}
</style>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="itemController">
   <div >
    <ul class="list-group" >
      <li class="list-group-item"><a href='https://www.google.co.uk/webhp?hl=en'>Item1</a></li>
      <li class="list-group-item"><a ng-class={'not-active':condition} href='https://www.google.co.uk/webhp?hl=en'>Item2</a></li>
      <li class="list-group-item"><a href='https://www.google.co.uk/webhp?hl=en'>Item3</a></li>          
    </ul>
  </div>
  <input type='button' value='Enable/Disable Link' ng-click='disableLink()'>
  </div>



</body>

</html>

＆＃13;

Answer 4

如果只使用ng-show / ng-hide来显示<a>或<span>，取决于保存项目是否可点击的布尔值，该怎么办？

这不是最性感的，但它仍然很干净。

这是一个plunker（我假设您的列表是动态创建的，但这不是真正重要的事情）

HTML：

<ul class="list-group" >
  <li ng-repeat="item in items" class="list-group-item">
    <span ng-hide="item.clickable">{{item.name}}</span>
    <a ng-show="item.clickable" href=''>{{item.name}}</a>
    <button ng-click="item.clickable = !item.clickable">Disable/Enable</button>
  </li>
</ul>

我还为演示添加了一个禁用/启用链接的按钮。

告诉我你对这个解决方案有什么看法。

想要使用angularjs

4 个答案: