Javascript AngularJS指令，用于启用/禁用所有子元素（a、按钮）

考虑以下HTML

<div userLevel="100">
    <a href="/someSite"></a>//should be disabled
    <button type="button">Click me</button>//should be disabled
    <button type="button" ng-disabled="true">Can't click me</button>//maybe already disabled
</div>

但是我如何处理已经被禁用的子元素呢？我如何处理子元素上的

ng disabled

指令，这取决于除用户级别以外的任何其他内容？启用时，我必须从仅由我的指令禁用的元素中删除禁用的类/attr，而保留其他禁用的元素。我怎样才能做到这一点

这就是我到目前为止所做的：

.directive("userLevel", [
    "userService",
    function ($USER) {
        return {
            restrict : "A",
            scope : true,
            link : function ($scope, $element, $attr) {

                var m_evtNS = ".userLevel",

                    //the user level needed to access children
                    m_RequiredUserLevel = $scope.$eval($attr["userLevel"]),

                    /**
                     *
                     * @param {Boolean} disable
                     */
                    disable = function (disable) {
                        //remove evt listener and toggle children class/attr
                        $element
                            .off(m_evtNS)
                            .find("a, button")
                            .toggleClass("disabled", disable)
                            .prop("disabled", disable);

                        //show login dialog when clicking on disabled elements
                        if (disable) {
                            $element.on("click" + m_evtNS, function () {
                                $USER.showLoginDialog();
                            });
                        }
                    };

                //watch for changes of the current user level (login/logout)
                $scope.$watch(function () {
                   return $USER.CurrentUser.level;
                }, function (userLevel) {
                   disable(userLevel < m_RequiredUserLevel);
                });
            }
        };
    }
])

指令（“用户级别”[
“用户服务”，
功能（$USER）{
返回{
限制：“A”，
范围：正确，
链接：函数（$scope、$element、$attr）{
var m_evtNS=“.userLevel”，
//访问子级所需的用户级别
m_RequiredUserLevel=$scope.$eval（$attr[“userLevel”]），
/**
*
*@param{Boolean}禁用
*/
禁用=功能（禁用）{
//删除evt侦听器并切换子类/attr
$element
.关闭（m_evtNS）
.find（“一个按钮”）
.toggleClass（“禁用”，禁用）
.道具（“禁用”，禁用）；
//单击禁用的元素时显示登录对话框
如果（禁用）{
$element.on（“单击”+m_evtNS，函数（）{
$USER.showLoginDialog（）；
});
}
};
//观察当前用户级别的更改（登录/注销）
$scope.$watch（函数（）{
返回$USER.CurrentUser.level；
}，函数（用户级）{
禁用（用户级别

您可以使用多种条件，如

ng disabled=“someVariable | | userLevel<100”

@devqon:我可以这样做。无论如何，我仍然需要一个指令来在单击禁用的元素时显示loginDialog。我还想到了一个特殊的标题弹出窗口，告诉用户需要登录才能启用这些元素。您可以使用多种条件，如

ng disabled=“someVariable | | userLevel<100”

@devqon:我可以这样做。无论如何，我仍然需要一个指令来在单击禁用的元素时显示loginDialog。我还想到了一个特殊的标题弹出窗口，告诉用户需要登录才能启用这些元素。

.directive("userLevel", [
    "userService",
    function ($USER) {
        return {
            restrict : "A",
            scope : true,
            link : function ($scope, $element, $attr) {

                var m_evtNS = ".userLevel",

                    //the user level needed to access children
                    m_RequiredUserLevel = $scope.$eval($attr["userLevel"]),

                    /**
                     *
                     * @param {Boolean} disable
                     */
                    disable = function (disable) {
                        //remove evt listener and toggle children class/attr
                        $element
                            .off(m_evtNS)
                            .find("a, button")
                            .toggleClass("disabled", disable)
                            .prop("disabled", disable);

                        //show login dialog when clicking on disabled elements
                        if (disable) {
                            $element.on("click" + m_evtNS, function () {
                                $USER.showLoginDialog();
                            });
                        }
                    };

                //watch for changes of the current user level (login/logout)
                $scope.$watch(function () {
                   return $USER.CurrentUser.level;
                }, function (userLevel) {
                   disable(userLevel < m_RequiredUserLevel);
                });
            }
        };
    }
])