UI-Router 状态：如何使用 $rootScope.$on 缩小安全的 app.run答案

【问题标题】：UI-Router States: How to make app.run with $rootScope.$on minification safeUI-Router 状态：如何使用 $rootScope.$on 缩小安全的 app.run
【发布时间】：2015-04-23 08:00:12
【问题描述】：

我在我的应用程序中使用 UI-Router 并检查状态顺序是否正确，我使用如下代码：

.value('myRouteSteps', [
      { uiSref: 'myRoute.home', valid: true },
      { uiSref: 'myRoute.pageOne', valid: false },
      { uiSref: 'myRoute.pageTwo', valid: false },

])
.run([
        '$rootScope',
        '$state',
        'myRouteSteps',
        function ($rootScope, $state, myRouteSteps) {


            $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

                var canGoToStep = false;

                var toStateIndex = _.findIndex(myRouteSteps, function (myRouteStep) {
                    return myRouteStep.uiSref === toState.name;

                });

                console.log('toStateIndex', toStateIndex)
                if (toStateIndex === 0) {
                    canGoToStep = true;
                } else {
                    canGoToStep = myRouteSteps[toStateIndex - 1].valid;
                }
                console.log('canGoToStep', toState.name, canGoToStep);

                // Stop state changing if the previous state is invalid
                if (!canGoToStep) {
                    // Abort going to step
                    event.preventDefault();
                }
            });
        }
]);

我在$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 线上遇到错误如果我进行缩小。

所以我把它改成了$rootScope.$on('$stateChangeStart', ['event','toState','toParams','fromState','fromParams', function (event, toState, toParams, fromState, fromParams) {

但我仍然遇到错误。

更新：

当我查看缩小的代码时，我看到：

}]).run(["$rootScope", "$state", "orderSteps", function (n, t, i) {
        n.$on("$stateChangeStart", function (n, t) {
            var r = !1,
                u = _.findIndex(i, function (n) {
                    return n.uiSref === t.name

我猜是不对的...如何解决？有什么建议吗？

【问题讨论】：

标签： javascript angularjs angular-ui-router bundling-and-minification

【解决方案1】：

_.findIndex在没有找到的情况下可以返回-1。 0 是数组中的第一项，-1 没有找到。这会导致这里出现问题

if (toStateIndex === 0) {
    canGoToStep = true;
} else {
    canGoToStep = myRouteSteps[toStateIndex - 1].valid;
}

当toStateIndex 为-1 时，您将获得超出范围异常的索引。

你可能想要这样的东西：

if (toStateIndex < 0) {
    canGoToStep = true;
} else {
    canGoToStep = myRouteSteps[toStateIndex].valid;
}

解释一下这是怎么发生的……当你第一次加载你的页面时，UI路由器将进入''状态，当它试图进入''时它会触发$stateChangeStart。 _.findIndex 在 myRouteSteps 中找不到 '' 并且 toStateIndex 变为 -1。 -1 不等于 0 所以它属于 else 块，-1 - 1 是 -2，myRouteSteps[-2] 超出范围。

【讨论】：

不，对于不存在的状态，我的代码中没有错误的可能性。这不是问题，正如您从上面的缩小代码中看到的那样， $rootScope 在内联函数中变为 toState （在缩小中都更改为 n ）..
没关系，您永远不会在该范围内使用$state，因此允许在该范围内覆盖该变量。因为您从不在该函数范围内使用$state，所以它不需要在那里，您也不需要对它的引用，并且缩小器知道这一点。
你是对的，当我在调试器中逐行运行时，它似乎正确传递了该部分，但又一次将我带到无限循环错误Error: $rootScope:infdig Infinite $digest Loop 如果我使用它不会这样做未缩小版。
好的，我已经在调试器中检查了 n、t、i 的缩小内容，但它们不是应有的内容。 $stateChangeStart 成为缩小版本中的事件，这是不应该的。如何将参数注入匿名函数以使其与缩小一起使用？
它们的注入方式与服务不同。 UI-router 将调用您的回调函数，每次都按该顺序传入参数。无论您如何称呼它们或它们在缩小后的名称都无关紧要。 '$stateChangeStart' 是一个字符串的事实正在变成一个变量，这告诉我有一个更大的问题。

【解决方案2】：

在我通过ng-annotate 传递我的文件并与原始文件进行比较后发现状态声明中缺少一个di 注释。

从现在开始，我将使用 ng-annotate，而不是尝试自己转换我的 Angular 应用缩小安全。

【讨论】：