未添加 AngularJS 类 ng-scope [英] AngularJS class ng-scope is not being added
问题描述
我正在关注 Angular 教程，我在他们的示例中看到 ng-scope 使用指令添加到每个元素.
https://docs.angularjs.org/guide/scope
但我自己的代码NOT为每个指令添加ng-scope，每件事似乎都可以从渲染数据开始，但出于某种原因，这个CSS类是未添加.
我的应用程序是从 Yeoman.io 入门项目开始的，所以我不确定该项目中的某些内容是否导致了问题.
https://github.com/diegonetto/generator-ionic
我已将 www 代码作为 .zip 文件添加到我的保管箱中:
https://www.dropbox.com/s/hn36080isu83vw5/www.zip
教程示例
我的例子
HTML
<h1 style="margin-top: 50px;">Scope Heirachy</h1><div class="show-scope-demo"><div ng-controller="ParentGreetController">你好{{name}}！<div ng-controller="ChildListController"><ol><li ng-repeat="name in names">{{name}} 来自{{department}}</li></ol>
控制器.JS
var moduleTest = angular.module('test', []);模块测试.controller('ParentGreetController', ['$scope', '$rootScope', function ($scope, $rootScope){$scope.name = '世界';$rootScope.department = '角度';}])//我们将访问在两个范围内的名称.controller('ChildListController', ['$scope', function ($scope){$scope.names = ['Igor', 'Misko', 'Vojta'];}]);App.JS
//Ionic Starter App//angular.module 是用于创建、注册和检索 Angular 模块的全局位置//'starter' 是这个 angular 模块示例的名称(也在 index.html 的 <body> 属性中设置)//第二个参数是一个 'requires' 数组//'starter.controllers' 在controllers.js 中找到angular.module('starter', ['ionic', 'starter.controllers', 'invoice1', 'invoice2', 'invoice3', 'test', 'myService']).run(function ($ionicPlatform) {$ionicPlatform.ready(function () {//默认隐藏辅助栏(删除此项以显示键盘上方的辅助栏//用于表单输入)如果(window.cordova && window.cordova.plugins.Keyboard){cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}如果(窗口.状态栏){//需要 org.apache.cordova.statusbarStatusBar.styleDefault();}});}).config(function ($stateProvider, $urlRouterProvider) {$stateProvider.state('应用程序', {网址:/应用"，摘要:真实，templateUrl: "templates/menu.html",控制器:'AppCtrl'}).state('app.search', {网址:/搜索"，意见:{'菜单内容':{templateUrl: "模板/search.html"}}}).state('app.browse', {网址:/浏览"，意见:{'菜单内容':{templateUrl: "模板/浏览.html"}}}).state('app.playlists', {网址:/播放列表"，意见:{'菜单内容':{templateUrl: "templates/playlists.html",控制器:'播放列表Ctrl'}}}).state('app.scopeHeirachy', {url: "/scopeHeirachy",意见:{'菜单内容':{templateUrl: "templates/sample/scopeHeirachy.html"}}});//如果以上状态都不匹配，则使用此作为后备$urlRouterProvider.otherwise('/app/playlists');});我尝试在 & 上设置 debugInfoEnabled关闭使用以下
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {$compileProvider.debugInfoEnabled(false);});和
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {$compileProvider.debugInfoEnabled(true);});检查是否在您的 javascript 中添加了以下代码行.这通常会删除调试信息，即 Ng-scope.这通常用于提高生产代码的性能.
$compileprovider.debuginfoenabled(false)I"m following the Angular Tutorials and I see in their example that ng-scope is added to each element with a directive.
https://docs.angularjs.org/guide/scope
But my own code does NOT add the ng-scope for each directive, every thing seems to work from rendering the data, but for some reason this CSS class is not added.
My Application has started life from a Yeoman.io starter project so I'm not sure if something in that project has caused the issue.
https://github.com/diegonetto/generator-ionic
Ive added the www code as a .zip in my dropbox:
https://www.dropbox.com/s/hn36080isu83vw5/www.zip
Tutorial Example
My Example
HTML
<h1 style="margin-top: 50px;">Scope Heirachy</h1>
<div class="show-scope-demo">
<div ng-controller="ParentGreetController">
Hello {{name}}!
</div>
<div ng-controller="ChildListController">
<ol>
<li ng-repeat="name in names">{{name}} from {{department}}</li>
</ol>
</div>
</div>
Controller.JS
var moduleTest = angular.module('test', []);
moduleTest
.controller('ParentGreetController', ['$scope', '$rootScope', function ($scope, $rootScope)
{
$scope.name = 'World';
$rootScope.department = 'Angular';
}])
// We will access name which is in both scopes
.controller('ChildListController', ['$scope', function ($scope)
{
$scope.names = ['Igor', 'Misko', 'Vojta'];
}]);
App.JS
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'invoice1', 'invoice2', 'invoice3', 'test', 'myService'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent': {
templateUrl: "templates/search.html"
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "templates/browse.html"
}
}
})
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent': {
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
.state('app.scopeHeirachy', {
url: "/scopeHeirachy",
views: {
'menuContent': {
templateUrl: "templates/sample/scopeHeirachy.html"
}
}
})
;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
I have tried setting debugInfoEnabled on & off using the following
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.debugInfoEnabled(false);
});
and
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.debugInfoEnabled(true);
});
Check if the following lines of code are added in your javascript. This usually removes debug info i.e. Ng-scope. This is usually added to improve performance in production code.
$compileprovider.debuginfoenabled(false)
这篇关于未添加 AngularJS 类 ng-scope的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
