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

【问题标题】：unable to access angular scope variable outside from javascript after gulp buildgulp构建后无法从javascript外部访问角度范围变量
【发布时间】：2016-06-06 14:07:01
【问题描述】：

我正在使用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)

我对 main 对象（控制器变量）很感兴趣。

编辑2：我也尝试了angular.reloadWithDebugInfo();，但结果相同。

【问题讨论】：

I am not able to get controllers scope variable - 当你尝试时会发生什么？
我编辑了我原来的问题。我还调查了父、根范围，但我找不到属性 main。

标签： angularjs gulp

【解决方案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]);

【讨论】：

我已正确设置 $compileProvider.debugInfoEnabled(true); 如果我禁用此功能，我什至无法获得范围。我通过调用获得 undefind 而不是空范围：angular.element("html[ng-app='admin']").scope()
我在 gulp 中关闭了模仿和“丑化”（请参阅我原始问题中的注释行）。我还使用 ngInject 来 DI 我的依赖项。我注入我的依赖如下：angular .module('xx.module') .factory('MyService', myService); /* @ngInject */ function myService($resource,coreConfig) {

【解决方案2】：

问题出在我的控制器上。我的控制器中有一个 js 错误，导致我的控制器未正确初始化并且范围为空。感谢您的帮助。

【讨论】：