如果 Angular.js 1.6.5 和 angular-ui-router 0.4.1.3 分别保存在同一个文件中，回调函数会改变范围吗？

Question

我在我的应用程序的 index.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 */
}

尽管我收到一个错误

The userToken is not defined.

完全可以理解。所以我在 isAuth 函数参数 中定义了 UserToken，比如

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

但是在这样做之后我得到一个错误说

cannot get foo() of undefined.

所以在那次混乱之后，我直接在 $rootscope.&on 事件旁边添加了回调参数，

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

猜猜控制台中打印了什么

poop.

%%%%%%% poop

我的问题是为什么直接添加到回调中才打印出来？为什么不早点，当我用它的名字 isAuth 调用函数时，它是分开的？

userToken 超出范围，这就是为什么它早些时候给出了未定义错误但现在它运行顺利，为什么会这样？

Answer 1

工厂userToken由angular创建并注入到main函数中。在此功能中，您可以随心所欲地访问 userToken 工厂。

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

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

//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.
  })
}

如果 Angular.js 1.6.5 和 angular-ui-router 0.4.1.3 分别保存在同一个文件中，回调函数会改变范围吗？

Do callback functions change scope if kept separately in the same file in Angular.js 1.6.5 with angular-ui-router 0.4.1.3?

factory

runtime

callback

angularjs

angular-ui-router