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

Question

有一个工作代码：拖放

通过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注释之类的东西，以自动执行此操作，因此您可以添加

.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也会知道要注入什么。