在AngularJS指令高级操纵DOM [英] Advanced manipulating DOM in AngularJS directive

问题描述

我解决AngularJS应用程序的权利......我想使用自定义指令解决哪些用户可以通过他的作用看。这只是客户端的设计。如果页面上的用户输入什么，他还没有访问，从这个页面数据的所有请求的服务器返回403。
我实际的解决方案是这样的：

I'm resolving rights in AngularJS application... I would like to use custom directive for resolving what user can see by his role. It's only client side design. If user entry on page what he hasn't access, server return 403 for all requests for data from this page. My actual solution looks like this:

＆LT;李NG重复=菜单项中navigationItems类='{{menuItem.css}}限制访问=menuItem.restrict＆GT;
    ＆所述; A HREF =＃/ {{menuItem.url}}＆GT;
        ＆LT; D​​IV CLASS =标签＆GT;
            ＆LT;跨度类=图标＆GT;
                ＆LT;跨度类=标题＆GT; {{menuItem.title}}＆LT; / SPAN＆GT;
            ＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
    ＆所述; / A＆GT;
＆LT; /李＆GT;

.directive('restrictAccess', function() {
    return {
        restrict: 'EA',
        prioriry: 100000,
        scope: {
            restrictAccess: "=restrictAccess"
        },
        controller: ['$scope', '$element', function($scope, $element) {

            var accessDenied = true;
            var userRole = App.LoggedUser.userRole;

            var attributes = $scope.restrictAccess.split(" ");
            for (var i in attributes) {
                if (userRole == attributes[i]) {
                    accessDenied = false;
                }
            }

            if (accessDenied) {
                $element.remove();
            }

        }]
    };
})

有很多问题...

通过渲染小部件控制器NG-包括比我的指令更快一些Ajax请求sended到服务器之前，我从DOM删除部件。 我需要什么样的指令在他们的子元素停止控制器。

Controllers of widgets rendered by ng-include are faster than my directive and some ajax requests are sended to server before I remove widgets from DOM. I need directive what stops controllers in their child elements.

我希望这是可以理解的......这里是测试小提琴

I hope it is understandable... Here is testing Fiddle

感谢大卫

推荐答案

我用angularjs认证拦截在我的最后一个项目。它适合你的需要。

I used angularjs authentication interceptor in my last project. It suits what you need..

Inteceptor卖场上的每个服务请求和广播信息的要求..
你可以在你的控制器获得广播消息。这里是code我处理..
结帐 AUTH拦截。

Inteceptor stores the request on every service request and broadcast message.. You can get broadcasted messages on your controllers. Here is the code I dealt with.. Checkout auth interceptor.

/**
 * @license HTTP Auth Interceptor Module for AngularJS
 * (c) 2012 Witold Szczerba
 * License: MIT
 */
angular.module('http-auth-interceptor', [])

    .provider('authService', function() {
        /**
         * Holds all the requests which failed due to 401 response,
         * so they can be re-requested in future, once login is completed.
         */
        var buffer = [];

        /**
         * Required by HTTP interceptor.
         * Function is attached to provider to be invisible for regular users of this service.
         */
        this.pushToBuffer = function(config, deferred) {
            buffer.push({
                config: config,
                deferred: deferred
            });
        }

        this.$get = ['$rootScope','$injector', function($rootScope, $injector) {
            var $http; //initialized later because of circular dependency problem
            function retry(config, deferred) {
                $http = $http || $injector.get('$http');
                $http(config).then(function(response) {
                    deferred.resolve(response);
                });
            }
            function retryAll() {
                for (var i = 0; i < buffer.length; ++i) {
                    retry(buffer[i].config, buffer[i].deferred);
                }
                buffer = [];
            }

            return {
                loginConfirmed: function() {
                    $rootScope.$broadcast('event:auth-loginConfirmed');
                    $rootScope.$apply();
                    //retryAll();
                }
            }
        }]
    })

/**
 * $http interceptor.
 * On 401 response - it stores the request and broadcasts 'event:angular-auth-loginRequired'.
 */
    .config(function($httpProvider, authServiceProvider) {

        var interceptor = ['$rootScope', '$q',function($rootScope, $q,$cookies) {
            function success(response) {
                return response;
            }

            function error(response) {
                if (response.status === 401) {                  
                    var deferred = $q.defer();
                    authServiceProvider.pushToBuffer(response.config, deferred);
                    $rootScope.$broadcast('event:auth-loginRequired');
                    return deferred.promise;
                }
                else if (response.status === 404 || response.status === 400) {

                    $rootScope.$broadcast('event:not-found');
                }
                // otherwise
                return $q.reject(response);
            }

            return function(promise) {
                return promise.then(success, error);
            }

        }];
        $httpProvider.responseInterceptors.push(interceptor);
    });

和在你的控制器：

$rootScope.$on('event:auth-loginRequired', function() {
     //do what you want, for example throw a message        
});

这篇关于在AngularJS指令高级操纵DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！