高級操縱DOM在AngularJS指令

Question

我在AngularJS應用解決權利......我想使用自定義指令解決哪些用戶可以通過他的作用看。這只是客戶端設計。如果用戶在頁面上輸入了他沒有訪問的內容，則服務器返回403以查看來自該頁面的所有數據請求。 我實際的解決方案是這樣的：

<li ng-repeat="menuItem in navigationItems" class='{{menuItem.css}}' restrict-access="menuItem.restrict"> <a href="#/{{menuItem.url}}"> <div class="label"> <span class="icon"> <span class="title">{{menuItem.title}}</span> </span> </div> </a> </li>

.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中移除小部件之前將其發送到服務器。 我需要指令什麼停止控制器在他們的子元素。

我希望這是可以理解的......這裏是測試Fiddle

感謝大衛

Answer 1

我用angularjs認證攔截在我的最後一個項目。它適合你所需要的。

Inteceptor將請求存儲在每個服務請求和廣播消息中。 您可以在控制器上獲得廣播消息。這裏是我處理的代碼.. 結帳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   
});