如何在装修UI的路由器的当前状态解析功能？当前功能则不会调用 [英] How to decorate current state resolve function in UI-Router? Current function isn't invoked

问题描述

我想干燥， $ stateProvider 和prevent将在每个相同的 AUTH 功能解决。我创建装饰，在每一个状态变化将这一功能添加到当前的状态，但 AUTH 则不会调用函数，如何修复或如何要解决问题讨论？

 的app.config（函数（$ stateProvider，$ urlRouterProvider，$提供）{
  $ provide.decorator（'$状态'，函数（$代表，$ rootScope）{
    $ rootScope。在$（'$ stateChangeStart'，函数（事件状态，则params）{
      如果（$ delegate.current ===登录|| $ delegate.current ===注册）{
        返回;
      }
      的console.log（装饰，$代表）;
      $ delegate.current.resolve = {
        AUTH：['AuthService'，'$ stateParams'，函数（AuthService，$ stateParams）{
          //如何调用该函数？
          如果（AuthService.isAuthenticated（））{
            返回AuthService.me（）; //诺言
          }其他{
            返回false;
          }
        }]
      };
    }）;
    返回$代表;
  }）;
 

状态定义：

  $ stateProvider.state（'根'，{
    摘要：真实，
    网址：'/'，
    观点：{
      ：{
        控制器：'RootCtrl'，
        templateUrl：意见/ root.html
      }，
      头@根：{
        templateUrl：意见/ header.html中
      }
    }
  }）
  .STATE（'root.home'，{
    URL：preFIX，
    观点：{
      内容@作品：{
        templateUrl：意见/ home.html做为'，
        //决心：{
        // AUTH：['AuthService'，'$ stateParams'，函数（AuthService，$ stateParams）{
        //}]
        //}
      }
    }
  }）
  ...
 

解决方案

如果我正确地理解你的要求，我们可以使用本机 UI-路由器内置的 装饰

装饰（姓名，FUNC）

  

允许扩展（小心），或重写（在你自己的危险）由$ stateProvider内部使用的stateBuilder对象。这可以用于自定义功能添加到用户界面的路由器，例如基于状态的名字推断templateUrl ... （读<一个href=\"http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider#methods_decorator\"相对=nofollow>更在doc ）的

有被工作plunker

那么，我们能有这样的 VAR AUTH

  VAR AUTH = ['AuthService'，'$ stateParams'，
  功能（AuthService，$ stateParams）{
    //如何调用所需要的状态这个功能呢？
    如果（AuthService.isAuthenticated（））{
      返回AuthService.me（）;
    }其他{
      返回false;
    }
  }
];
 

在这里，我们只使用装饰用一些IF逻辑

 的.config（['$ stateProvider'，
  功能（$ stateProvider）{    $ stateProvider.decorator（'意见'，函数（州，父母）{
      VAR的结果= {}，
        意见=父（州）;      //有些幼稚例如，当不注入决心
      如果（state.name ===家）{
        返回意见;
      }
      //子已经在父
      如果（state.name.indexOf（）＆GT; 0）{
        返回意见;
      }      angular.forEach（意见，功能（配置，名字）{        //这里注入的决心（如果不存在）
        config.resolve = config.resolve || {};
        //与上面的权威性东西扩展它
        config.resolve.auth =权威性;        结果[名] =配置;
      }）;      返回结果;
    }）;  }
]）
 

和后来我们几个州，将上述材料进行扩展

  $ stateProvider
    .STATE（'家'，{
      网址：/家，
      templateUrl：tpl.html'，
    }）
    .STATE（'父'，{
      网址：/父，
      templateUrl：tpl.html'，
      控制器：'SharedCtrl'，
    }）
    .STATE（'parent.child'，{
      网址：/子，
      templateUrl：tpl.html'，
      控制器：'SharedCtrl'，
    }）;
 

检查它在行动这里

I'm trying to DRY in $stateProvider and prevent adding the same auth function in each resolve. I've created decorator that in each state change would add this function to current state, but auth function isn't invoked, How to fix it or how to workaround discussed issue?

app.config(function ($stateProvider, $urlRouterProvider, $provide) {
  $provide.decorator('$state', function($delegate, $rootScope) {
    $rootScope.$on('$stateChangeStart', function(event, state, params) {
      if ($delegate.current === "login" || $delegate.current === "register") {
        return;
      }
      console.log("decorator", $delegate);
      $delegate.current.resolve = {
        auth: ['AuthService', '$stateParams', function(AuthService, $stateParams) {
          //how to invoke this function?
          if (AuthService.isAuthenticated()) {
            return AuthService.me(); //promise
          } else {
            return false;
          }
        }]
      };
    });
    return $delegate;
  });

states definition:

  $stateProvider.state('root', {
    abstract: true,
    url: '/',
    views: {
      "": {
        controller: 'RootCtrl',
        templateUrl: 'views/root.html'
      },
      "header@root": {
        templateUrl: 'views/header.html'
      }
    }
  })
  .state('root.home', {
    url: urlPrefix,
    views: {
      "content@artworks": {
        templateUrl: 'views/home.html',
        //resolve: {
        //  auth: ['AuthService', '$stateParams', function(AuthService, $stateParams) {
        //  }]
        //}
      }
    }
  })
  ...

解决方案

If I understand your requirement correctly, we can use native UI-Router built-in decorator:

decorator(name, func)

Allows you to extend (carefully) or override (at your own peril) the stateBuilder object used internally by $stateProvider. This can be used to add custom functionality to ui-router, for example inferring templateUrl based on the state name... (read more in the doc)

There is a working plunker

So, we can have this var auth

var auth = ['AuthService', '$stateParams',
  function(AuthService, $stateParams) {
    //how to invoke this function on needed states?
    if (AuthService.isAuthenticated()) {
      return AuthService.me();
    } else {
      return false;
    }
  }
];

And here we just use decorator with some "IF" logic

.config(['$stateProvider', 
  function($stateProvider) {

    $stateProvider.decorator('views', function(state, parent) {
      var result = {},
        views = parent(state);

      // some naive example when to not inject resolve
      if (state.name === "home") { 
        return views;
      }
      // child already has that in parent
      if (state.name.indexOf(".") > 0) { 
        return views;
      }

      angular.forEach(views, function(config, name) {

        // here inject the resolve (if not existing)
        config.resolve = config.resolve || {};
        // and extend it with the auth stuff above
        config.resolve.auth = auth;

        result[name] = config;
      });

      return result;
    });

  }
])

And later few our states, which will be extended by the above stuff

$stateProvider
    .state('home', {
      url: "/home",
      templateUrl: 'tpl.html',
    })
    .state('parent', {
      url: "/parent",
      templateUrl: 'tpl.html',
      controller: 'SharedCtrl',
    })
    .state('parent.child', {
      url: "/child",
      templateUrl: 'tpl.html',
      controller: 'SharedCtrl',
    });

Check it in action here

这篇关于如何在装修UI的路由器的当前状态解析功能？当前功能则不会调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！