Question

我的目标是从后端拉出部分菜单结构并将其“注入”我的菜单中。这取决于应用程序的状态（登录/注销和用户权限）。

我建立了一个指令：

AppDirectives.directive("menutagebuch", ['MenuStructureService',function(MenuStructureService){
    /// get the html from the backend
    var getelement  = MenuStructureService.get();
    var elementtoinsert = angular.element(getelement);

    return {
        restrict: "A",
        template: elementtoinsert,
        link: function(scope,element){
            // some $scope.$watch to recall MenuStructureService.get(); on $rootscope change
        }
    }

}]);

我的服务：

AppFactories.factory("MenuStructureService", function($http) {
  return {
    get: function() {
      var getMenuStructure = $http.get('/menustructure').success(function(data){
        return data;
      });
    }
  }
});

我遇到的问题是指令在加载菜单结构之前执行...我必须做些什么不同或者我使用了错误的方法？ angularJS很新。

Answer 1

是的，问题是你是否真的想在这里使用指令。或者是一个足够你的控制器。如果你想为此编写一个指令，并且想要操作DOM元素，那么你应该在编译步骤中这样做。

要做到这一点Angular样式使用模板进行直观而不是在编译步骤中进行jQuery样式的DOM操作。如果您使用模板，则可以在链接步骤中访问您的服务。

//Service
...
get: function() {
  // Rather than handling the success in the service return the promise directly
  return $http.get('/menustructure');
}
...

//Directive
...
link: function(scope, element) {
  scope.menu = MenuStrucutureService.get();
}
templateUrl: "...template.html"

...

<!-- Example Directive Template -->
<div ng-repeat="item in menu.admin.items">
  <span>{{item.name}}</span>
</div>

如果您遵循角度文档中的经验法则，指令控制器在这里可能没有意义： “最佳实践：当您希望将API公开给其他指令时使用控制器。否则使用链接。”。

Answer 2

好的，我解决它的方法是将所有“动作”移动到MenuCtrl中并观察身份验证状态。如果auth状态更改，则调用工厂MenuStructureService以获取菜单的元素。使用ng-show和ng-repeat，然后控制显示/隐藏菜单的操作以及填充的元素。

身份验证状态更改：

$rootScope.authstatus = true;

控制器处理操作：

$rootScope.$watch('authstatus',function(){
        MenuStructureService.get();

      });

$rootScope.$on('menustructure', function(event){
        $scope.menu = $rootScope.menustructure;
});

MenuStructureService：

AppFactories.factory("MenuStructureService", function($rootScope, $http) {
  return {
    get: function() {
      $http.get('/menustructure').success(function(data){ 
        $rootScope.menustructure = data;
        $rootScope.$broadcast('menustructure', 'updated');
        return data;
      });

    }
  }
});

后端根据当前的authstatus提供元素。

使用服务更新角度指令

2 个答案: