Question

我正在使用gulp开发angular应用。
如果我使用gulp serve运行我的应用，我可以从外部访问我的scope，我可以在Chrome控制台中成功运行此代码

angular.element("html[ng-app='admin']").scope().myVariable

但如果我运行gulp build并将dist文件夹部署到我的Web服务器，我将无法获得控制器范围变量。
怎么可能？

我的gulp（默认来自yeoman发电机）

gulp.task('html', ['inject', 'partials'], function () {
var partialsInjectFile = gulp.src(path.join(conf.paths.tmp,     '/partials/templateCacheHtml.js'), { read: false });
var partialsInjectOptions = {
starttag: '<!-- inject:partials -->',
ignorePath: path.join(conf.paths.tmp, '/partials'),
addRootSlash: false
};

var htmlFilter = $.filter('*.html');
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
var assets;

 return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe(assets = $.useref.assets())
.pipe($.rev())
.pipe(jsFilter)
.pipe($.ngAnnotate())
 // .pipe($.uglify({ preserveComments: $.uglifySaveLicense  })).on('error', conf.errorHandler('Uglify'))
  .pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.replace('../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe(htmlFilter)
//.pipe($.minifyHtml({
//  empty: true,
//  spare: true,
//  quotes: true,
//  conditionals: true
//}))
.pipe(htmlFilter.restore())
.pipe(gulp.dest(path.join(conf.paths.dist, '/')))
.pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true  }));
});

编辑：

有评价的结果

angular.element("html[ng-app='admin']").scope()

在开发模式（gulp serve）

 $$ChildScope: null
 $$childHead: null
 $$childTail: null
 $$listenerCount: Object
 $$listeners: Object
 $$nextSibling: null
 $$prevSibling: null
 $$watchers: null
 $$watchersCount: 0
 $id: 3
 $parent: Scope

并且在生产（gulp build）中有相同的内容

  $$ChildScope: ChildScope()
  $$childHead: ChildScope
 $$childTail: ChildScope
 $$listenerCount: Object
 $$listeners: Object
 $$nextSibling: null
 $$prevSibling: null
 $$watchers: Array[3]
 $$watchersCount: 22
 $id: 3
 $parent: Scope
 main: Object
 setData: (data)

我很喜欢主要对象（控制器变量）。

EDIT2：我也试过angular.reloadWithDebugInfo();，但结果相同。

Answer 1

您或其中一个gulp插件是否在某处禁用了它？

.config(['$compileProvider', function($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}])

检查：Disabling Debug Data in AngularJS application 如果这是问题，在控制台angular.reloadWithDebugInfo();中运行应该有帮助。

要检查的另一件事 - 如果你在gulp中使用javascript代码缩小，那么可能会遗漏一些依赖注入语句。我的意思是声明应包括正确的DI项目命名，如下所示：

var controllerFunction = function($scope, $stateParams, $rootScope) {
    //do stuff
}

angular.module('myApp.myModule')
.controller('controllerName', ['$scope', '$stateParams', '$rootScope', controllerFunction]);

Answer 2

我的控制器出现了问题。我的控制器中有一个js错误导致我的控制器没有正确初始化并且范围是空的。谢谢你的帮助。

在gulp构建之后无法从javascript外部访问角度范围变量

2 个答案: