angularjs – 注入解析为指令控制器

前端之家收集整理的这篇文章主要介绍了angularjs – 注入解析为指令控制器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用AngularUI路由器(0.2.13)并且具有这样定义的状态
  1. .state('foo',{
  2. template:'<div some-directive></div>',resolve:{
  3. foo:function(SomeService){
  4. return SomeService.something().promise;
  5. }
  6. })

和这样的指令:

  1. app.directive('someDirective',function(){
  2. return {
  3. controller: function(data) {
  4. // I want `data` to be injected from the resolve...
  5. // as it would if this was a "standalone" controller
  6. }
  7. }
  8. })

但这不起作用 – 数据参数导致UnknownProvider错误.独立定义指令控制器并在指令中按名称设置它具有相同的结果.

我或多或少知道为什么会这样,但有两个问题:

>有没有办法做我想做的事情?
>我应该尝试这样做,还是我在这里进入反模式?

你不能在指令中使用resolve,但是你可以将在状态中解析的结果传递给我认为可以完成你正在寻找的指令.

您需要更新状态定义以包含控制器并在指令上设置参数:

  1. .state('foo',{
  2. template:'Test<div some-directive something="foo"></div>',url: 'foo',resolve:{
  3. foo:function(SomeService){
  4. return SomeService.something();
  5. }
  6. },controller: function($scope,foo){
  7. $scope.foo = foo;
  8. }
  9. })

然后更新指令以使用此参数:

  1. .directive('someDirective',function(){
  2. return {
  3. controller: function($scope) {
  4. // I want `data` to be injected from the resolve...
  5. // as it would if this was a "standalone" controller
  6. console.log('$scope.something: '+ $scope.something);
  7. },scope: {
  8. something: '='
  9. }
  10. };
  11. })

这是一个样本plunker:http://plnkr.co/edit/TOPMLUXc7GhXTeYL0IFj?p=preview

猜你在找的Angularjs相关文章