做回调函数改变范围，如果保持在同一文件的角度。使用angular-ui-路由器0.4.1.3?

I have a factory initialized in the index.js of my application like,

我在索引中初始化了一个工厂。我的应用的js，

app.factory('userToken', function(){
  return {
    foo : function() {
        var authToken = "poop"
        return authToken 
    }
  }
})

app.run(['$rootScope', '$state', 'userToken', main])

function main ($rootScope, $state, userToken) {
   console.log(userToken.foo()) 
   $rootScope.$on('$stateChangeStart', isAuth)
}

function isAuth (event, toState, toParams, fromState, fromParams) { 
   console.log("%%%%%%%%%%%%%", userToken.foo()) /* UserToken not defined */
}

Although I receive an error as

虽然我收到一个错误的a

The userToken is not defined.

userToken没有定义。

Totally understandable. So I define the UserToken in the isAuth function parameter like,

完全可以理解的。我在isAuth函数参数中定义UserToken，

function isAuth (event, toState, toParams, fromState, fromParams, userToken) { 
 console.log("%%%%%%%%%%%%%", userToken.foo())
}

But after doing this I get an error saying

但是这样做之后，我得到一个错误的结果

cannot get foo() of undefined.

无法得到未定义的foo()。

So after that mess, I added the callback parameter straight next to $rootscope.&on event,

因此，在混乱之后，我直接在$rootscope旁边添加回调参数。片区事件,

function main ($rootScope, $state, userToken) {
  console.log(userToken.foo()) 
  $rootScope.$on('$stateChangeStart', function (event, 
  toState,toParams,fromState, fromParams /* Removed userToken */) {
      console.log("%%%%%%%%%%%%%", userToken.foo())
  })
}

And guess what got printed in the console

猜猜在控制台打印了什么。

poop.

便便。

%%%%%%% poop

% % % % % % %粪便

My question is why did it print only when I added it to the callback directly? Why not earlier when I called the function by its name isAuth while it was kept separate?

我的问题是为什么只有当我直接将它添加到回调时它才会打印?为什么不早些时候，当我用它的名字isAuth调用这个函数时，它是分开的呢?

The userToken was out of scope which is why it gave an error earlier of it being not defined but now it ran without a hitch, why would this be?

userToken超出了范围这就是为什么它之前给出的错误没有定义但是现在它运行起来没有问题，为什么会这样呢?

1 个解决方案

#1

The factory userToken is created by angular and injected into the main function. In this function you may then access the userToken factory wherever you like.

工厂userToken通过角创建并注入到主函数中。在这个函数中，您可以访问userToken工厂，无论您在哪里。

In your first example isAuth is defined outside of the main function so no longer has access to the userToken factory.

在您的第一个示例中，isAuth是在main函数之外定义的，因此不再访问userToken工厂。

In your working example the function is still in the same scope as the main function and as such has access to the variable of the main function.

在您的工作示例中，函数仍然与主函数处于相同的范围内，因此可以访问主函数的变量。

//This means on run, call the main function and inject $rootScope,
// $state and userToken
app.run(['$rootScope', '$state', 'userToken', main])

//So teh main function is called and the above items are injected
function main ($rootScope, $state, userToken) {
  $rootScope.$on('$stateChangeStart', function (event, 
  toState,toParams,fromState, fromParams) {
      console.log("%%%%%%%%%%%%%", userToken.foo()) //This references the userToken that was injected into run.
  })
}

#1