Question

我的角度代码在缩小之前就可以正常工作了：

angular.module('starter', ['ionic', 'ionic.contrib.ui.tinderCards2'])
  .config(function($stateProvider, $urlRouterProvider) {})
  .directive('noScroll', function($document) {
    return {
      restrict: 'A',
      link: function($scope, $element, $attr) {
        $document.on('touchmove', function(e) {
          e.preventDefault();
        });
      }
    }})
  .controller('CardsCtrl', function($scope, TDCardDelegate, $timeout) {

    var qc        = 0, // Current Question counter
        points    = 0, // Current points
        validIdx = cardTypes.valid,
        $points   = ("p>span");


    $scope.cards = {
      master: Array.prototype.slice.call(cardTypes, 0),
      active: Array.prototype.slice.call(cardTypes, 0),
      discards: [],
      liked: [],
      disliked: []
    }

    $scope.points = 0;

    $scope.cardDestroyed = function(index) {
      $scope.cards.active.splice(index, 1);
    };

    $scope.addCard = function() {
      var newCard = cardTypes[0];
      $scope.cards.active.push(angular.extend({}, newCard));
    }

    $scope.refreshCards = function() {
      // Set $scope.cards to null so that directive reloads
      $scope.cards.active = null;
      $timeout(function() {
        $scope.cards.active = Array.prototype.slice.call($scope.cards.master, 0);
      });
      $scope.points = 0;
    }

    $scope.$on('removeCard', function(event, element, card) {
      var discarded = $scope.cards.master.splice($scope.cards.master.indexOf(card), 1);
      $scope.cards.discards.push(discarded);
    });

    $scope.cardSwipedLeft = function(index) {
      var card = $scope.cards.active[index];
      $scope.cards.disliked.push(card);

      var givenAnswer = 0,
          correctAnswer = card.valid;  

      //increment the points variable if the answer is correct:
      if (givenAnswer === correctAnswer) {
          $scope.points++;             
      } 
    };

    $scope.cardSwipedRight = function(index) {
        // console.log('RIGHT SWIPE');
        var card = $scope.cards.active[index];
        $scope.cards.liked.push(card);

       var givenAnswer = 1,
           correctAnswer = card.valid;

        //increment the points variable if the answer is correct:
        if (givenAnswer === correctAnswer) {
            $scope.points++;             
        } 

    };

    $scope.onClickNotFamily = function(index) {
        // console.log('RIGHT CLICK');
        var card = $scope.cards.active[index];
        $scope.cards.liked.push(card);

        var givenAnswer = 0,
            correctAnswer = card.valid;  

        //increment the points variable if the answer is correct:
        if (givenAnswer === correctAnswer) {
            $scope.points++;             
        } 

    };

    $scope.onClickFamily = function(index) {
      // console.log('RIGHT CLICK');
      var card = $scope.cards.active[index];
      $scope.cards.liked.push(card);

      var givenAnswer = 1,
          correctAnswer = card.valid;  

      //increment the points variable if the answer is correct:
      if (givenAnswer === correctAnswer) { 
          $scope.points++;             
      }

    };
  })
  .controller('CardCtrl', function($scope, TDCardDelegate) {});

但是一旦缩小，我就会收到这个错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:unpr] Unknown provider: b
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=b
    at http://win.deezer.family/v1/js/ionic.bundle.js:13437:12
    at http://win.deezer.family/v1/js/ionic.bundle.js:17787:19
    at getService (http://win.deezer.family/v1/js/ionic.bundle.js:17940:39)
    at injectionArgs (http://win.deezer.family/v1/js/ionic.bundle.js:17964:58)
    at Object.invoke (http://win.deezer.family/v1/js/ionic.bundle.js:17986:18)
    at runInvokeQueue (http://win.deezer.family/v1/js/ionic.bundle.js:17887:35)
    at http://win.deezer.family/v1/js/ionic.bundle.js:17896:11
    at forEach (http://win.deezer.family/v1/js/ionic.bundle.js:13690:20)
    at loadModules (http://win.deezer.family/v1/js/ionic.bundle.js:17877:5)
    at createInjector (http://win.deezer.family/v1/js/ionic.bundle.js:17799:19)
http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=starter&p1=Error%3A…20(http%3A%2F%2Fwin.deezer.family%2Fv1%2Fjs%2Fionic.bundle.js%3A17799%3A19)

我是棱角分明的新手，也是缩小过程的新手。是否有人发现在缩小后可能会导致问题的东西？

如果可以，请提供一个关于我如何解决它的例子？

我感谢任何帮助。谢谢大家！

Answer 1

添加注射器注释。

有几种方法可以做到这一点。使用原型模式时，您可以轻松地将.directive('noScroll', ['$document', function($document) { // . . . }]) .controller('CardsCtrl', ['$scope', 'TDCardDelegate', '$timeout', function($scope, TDCardDelegate, $timeout) { // . . . }]);添加到原型中。

由于您没有使用此模式，因此内联数组注释将是最简单的路径。

示例：

%TEMP%

Answer 2

当您缩小JS文件时，它们会被混淆。当发生这种情况时，您编写的代码将被修改。

例如：

someModule.controller('MyController', function($scope, greeter) {
   $scope.bar = greeter.foo;
});

在缩小之后，可以解决这样的问题：

c.controller('MyController',function(a,b){a.bar=b.foo;});

Params $ scope 和 greeter 将替换为 a 和 b 。

然后当你运行缩小的代码时，Angular依赖性注入器在尝试注入 a 和 b 依赖项时失败，因为它们不存在。

但是...

通过使用依赖性注释可以修复它。你可以使用：

内联数组注释

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

$ inject属性注释

var MyController = function($scope, greeter) {
  // ...
}
MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);

此处有更多信息：https://code.angularjs.org/1.4.12/docs/guide/di

如何更正我的代码，以便它在缩小后不会出错？

2 个答案: