当我最小化它时代码停止工作

Question

有一个工作代码：drag-and-drop

代码在通过 GULP uglify()

时不起作用

 'use strict';
 const gulp = require('gulp');
 const $ = require('gulp-load-plugins')();
 const uglifyes = require('uglify-es');
 const composer = require('gulp-uglify/composer');
 const uglify = composer(uglifyes, console);

 module.exports = function(options) {
   return function() {
     return gulp.src(options.from)
     .pipe($.if(!isDevelopment, uglify()))
     .pipe(gulp.dest(options.to))
   };
 };

下面代码哪里错了？

var app = angular.module('app', ['ui.sortable', 'Myanimate']);

angular.module('Myanimate', [])
    .factory('animate', function() {

    var time = 3000;
    var timeout = null;

    return {
        _hideAnimate: function(item) {      
            timeout = timeout || setTimeout(function() {
                this.removeBackground(item);

                timeout = null;
            }.bind(this), time);    
        },

        setBorder : function(item) {
            item.addClass('red-border');
            this.removeBorder(item);
            this._hideAnimate(item);
            return item;
        },
        setBackground: function(item) {
            item.addClass('red-border red-border-background');
            this._hideAnimate(item);
            return item;
        },
        removeBorder : function(item) {
            item.removeClass('red-border-background');
            return item;
        },
        removeBackground: function(item) {
            item.removeClass('red-border red-border-background');   
            return item;
        }
    }
});

app.controller('appController', function ($scope, animate) {

  $scope.list1 = ['A', 'B', 'C'];
  $scope.list2 = ['1', '2', '3'];
  $scope.list3 = ['X', 'Y', 'Z'];
  $scope.elemMoved = null;

  $scope.sortableOptions = {
    over : function(e,ui) {
    var $targetElem = $(e.target);

      if($targetElem.hasClass('second')) {
        animate.setBorder(ui.item);
      } else if($targetElem.hasClass('third')) {    
        animate.setBackground(ui.item);
      } else {
        animate.removeBackground(ui.item);  
      }
    },

    update: function(e, ui) {

    var moveItem =  $scope.elemMoved = ui.item.sortable.moved;
    var ngModel = $(ui.item.sortable.droptarget).attr('ng-model');

    if(typeof moveItem === 'undefined') {
        return;
    }

     if($(ui.item.sortable.droptarget).hasClass('third')) {   
      if($.inArray(moveItem, $scope.list1) === -1) {
          if(ui.item.sortable.droptarget || e.target != ui.item.sortable.droptarget[0]) {
                $scope.list1.push(moveItem);
          }
      } 
    }

    },
    stop: function(e, ui) {
        ui.item.removeClass('red-border red-border-background');      
    },
    connectWith: ".apps-container"
  };

});

Answer 1

您需要更改代码并包含一个数组，其中包含您希望 angular 注入控制器的内容

app.controller('appController', function ($scope, animate)

应该是

app.controller('appController', ['$scope', 'animate', function ($scope, animate) {
    // ...
}]);

您也可以使用 ng annotate 之类的东西，它会自动执行此操作，因此您可以添加

.pipe(ngAnnotate({
    // true helps add where @ngInject is not used. It infers.
    // Doesn't work with resolve, so we must be explicit there
    add: true
}))

到您的 gulp 管道，只需使用函数上方的注释

/* @ngInject */
app.controller('appController', function ($scope, animate)

现在 angular 即使在变量被缩小之后也知道要注入什么。

当我最小化它时代码停止工作

Code stops working when I minimize it

javascript

minify

gulp

gulp-uglify