angular injector() 在 gulp 缩小后不工作

Question

在 gulp 缩小后我收到一个错误：Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=nProvider%20%3C-%20n

什么会导致这个错误？ 我使用 jScroll 进行自动分页，当我添加另一个页面时，我必须在页面上编译添加的项目。在运行gulp时可以正常工作，但是在gulp --production之后就不行了。

paginationCtrl.js

(function () {

'use strict';

app.controller('paginationCtrl', [
'$scope', '$alert', '$http', '$timeout', '$compile',
function ($scope, $alert, $http, $timeout, $compile) {

    $scope.compileElements = function () {
        $('.jscroll-inner').each(function () {
            var content = $(this);
            angular.element(document).injector().invoke(function($compile) {
                var scope = angular.element(content).scope();
                $compile(content)(scope);
                $scope.$apply();
            });
        });
    }

    $(document).ready(function(){
        $('.scroll-element').jscroll({
            loadingHtml: "",
            autoTrigger: true,
            nextSelector: '.scroll-pagination',
            contentSelector: '.scroll-element',
            callback: function() {
                $('ul.pagination:visible:first').hide();
                $scope.$digest();
                angular.element(document).ready(function () {
                    $scope.compileElements();
                });
            }
        });
    });
}]);
})();

gulpfile.js

var gulp = require('gulp');
var notify = require("gulp-notify");
var mainBowerFiles = require('main-bower-files');

var elixir = require('laravel-elixir');
require('laravel-elixir-livereload');
require('laravel-elixir-vueify');

gulp.task('bower', function() {
    return gulp.src(mainBowerFiles())
        .pipe(gulp.dest('resources/assets/js/vendor'))
        .pipe(notify("Success: Bower Installments!"));
});

elixir(function(mix) {
    mix.sass(['main.scss'], 'public/assets/css/main.css')
        .scripts([
            'resources/assets/js/vendor/jquery.min.js',
            'resources/assets/js/vendor/angular.min.js',
            'resources/assets/js/vendor/moment.min.js',
            'resources/assets/js/vendor/jquery.pjax.js',
            'resources/assets/js/vendor/jquery.timepicker.min.js',
            'resources/assets/js/vendor/**/*.js',
            ], 'public/assets/js/vendor.js')
        .scriptsIn('resources/assets/js/app', 'public/assets/js/app.js')
        .version([
            'assets/css/main.css', 
            'assets/js/vendor.js', 
            'assets/js/app.js', 
        ])
        .livereload([ 'app/**/*', 'public/build/**/*', 'resources/views/**/*' ]);
});

Answer 1

你有这段代码：

angular.element(document).injector().invoke(function($compile) {
    var scope = angular.element(content).scope();
    $compile(content)(scope);
    $scope.$apply();
});

在缩小之前，您要求 angular 注入 $compile。缩小后，您要求 Angular 注入 n，之后 Angular 抛出错误 Unknown provider: nProvider.

最简单的修复方法是使用 array notation 进行缩小安全依赖注入。所以那段代码变成：

angular.element(document).injector().invoke(['$compile',function($compile) {
    var scope = angular.element(content).scope();
    $compile(content)(scope);
    $scope.$apply();
}]);

angular injector() 在 gulp 缩小后不工作

angular injector() not working after gulp minify

laravel

angularjs

angularjs-injector

gulp