Question

与此问题相关：How do I create a dynamic nav which gets allowed menu items passed to it?

基本上，我在任何视图之外都有导航。导航需要显示用户有权访问的菜单项。

我使用如下指令创建导航标记：

<tree family="treeFamily"></tree>

其中treeFamily是用于构建导航菜单的数据。

但是，由于我的导航在任何视图之外，因此它没有控制器，因此没有名为treeFamily的范围变量。这意味着该指令不会获取任何数据来创建导航。

我原本以为我可以使用菜单项的数据注入服务，但是我无法看到告诉角度指令使用从注入服务中获取的数据进行绑定。

唯一可能的另一种方法是使用名为treeFamily的$ rootScope变量，并将指令生成的标记绑定到该变量。

Answer 1

如果您不想使用$rootScope变量，这是一个有点hacky的解决方案，但您可以通过元素获得范围。

实施例

假设您的数据已应用于测试控制器，因此您有一个像这样的元素

<div id="test" ng-controller="test">

你可以使用jQuery（不是必需的）

来做这个例子

$('#test').scope().treeFamily

您可以访问从中获取数据所需的范围，正在进行演示。

演示：http://jsfiddle.net/hq26h/

在演示中，随机指令在指令位于控制器之外时，从测试控制器访问treeFamily数据。

如果您不希望服务数据可绑定，则可以执行此操作

app.directive('something', function( $someNavDataService ) {
    return function( $scope ) {
       $scope.navData = $someNavDataService;
    }; 
});

Answer 2

我仍然认为你想看看angular-ui路由器，正如你在previous question

中提到的那样

https://github.com/angular-ui/ui-router

但是，如果没有angular-ui-router，我的方法是创建服务，然后在声明时将服务注入到指令中，并按照{{3}使用其中的数据}。

例如：

angular.module('yourModule').service('yourService', function() {
   // define your service
});

angular.module('yourModule').directive('yourDirective', function(yourService) {
  return {
     link: function postLink(scope, element, attrs) {
       // you can now define your directive and access your yourService service
     }
  };
});

如何将指令绑定到注入的服务而不是父节点或隔离的范围？

2 个答案: