AngularJS class ng-scope is not being added

Question

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

    });

Reposted with some code (do you need more or is that enough?) — David Cruwys
– David Cruwys, Commented Feb 24, 2015 at 5:09
@DavidSee: can we see your full html please or a plunkr for the issue — V31
– V31, Commented Feb 24, 2015 at 5:41
does the angular versions are same of tutorial and in your code? — Pankaj Parkar
– Pankaj Parkar, Commented Feb 24, 2015 at 5:42
Sure, whats the best way to do that? Zip up the www folder? I mean the code is spread across a number of files, I'm not sure what is to debug this? — David Cruwys
– David Cruwys, Commented Feb 24, 2015 at 5:43

Harsh · Accepted Answer · 2015-02-24 05:13:33Z

6

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)

answered Feb 24, 2015 at 5:13

Harsh

1,7051 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

David Cruwys Over a year ago

I have looked through my project and do not see that line, is there a place I can find this property?

Harsh Over a year ago

It is in "app.config". Like below. app.config(['$compileProvider', function ($compileProvider) { // disable debug info $compileProvider.debugInfoEnabled(false); }]);

Harsh Over a year ago

Try giving true to debugInfoEnabled. See if ng-scope comes back. app.config(['$compileProvider', function ($compileProvider) { // disable debug info $compileProvider.debugInfoEnabled(true); }]);

David Cruwys Over a year ago

I tried this code and was able to make ng-binding turn off and on, but ng-scope has not come up. .config(function ($stateProvider, $urlRouterProvider, $compileProvider) { $compileProvider.debugInfoEnabled(false); $stateProvider }) NOTE: I tried both true & false .config(function ($stateProvider, $urlRouterProvider, $compileProvider) { $compileProvider.debugInfoEnabled(true); $stateProvider })

Harsh Over a year ago

Try this in your console. Lets check whether scoped element is available or not. angular.element($0).scope()

|

Vinay K · Accepted Answer · 2015-02-24 07:47:48Z

1

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.

answered Feb 24, 2015 at 7:47

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

2 Comments

Harsh Over a year ago

Upvoting you. I thought the same too after all the tries. Hope it turns out good for David. :)

David Cruwys Over a year ago

I feel like this may be the issue, but I did some debugging here and could not find an example where this function even received ng-scope as a value for cssClasses, for now I'm putting this problem on hold as it is not stopping my code, just a pain in the a$$. Thanks for the help from everyone

Collectives™ on Stack Overflow

AngularJS class ng-scope is not being added

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related