AngularJS class ng-scope is not being added

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);

    });

回答1:

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)

回答2:

ionic-angular.js has overridden the addClass function.

Here is the snippet.

jqLite.prototype.addClass = function(cssClasses) {
  var x, y, cssClass, el, splitClasses, existingClasses;
  if (cssClasses && cssClasses != 'ng-scope' && cssClasses != 'ng-isolate-scope') {
    //............

Because of the if condition ng-scope and ng-isolate-scope classes are not getting added even if the debuggingInfo is enabled.