javascript - 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.

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.

Ive added the www code as a .zip in my dropbox:

.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, $pileProvider) {
        $pileProvider.debugInfoEnabled(false);

    });

and

.config(function($stateProvider, $urlRouterProvider, $pileProvider) {
        $pileProvider.debugInfoEnabled(true);

    });

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/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./diegonetto/generator-ionic

Ive added the www code as a .zip in my dropbox:

https://www.dropbox./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, $pileProvider) {
        $pileProvider.debugInfoEnabled(false);

    });

and

.config(function($stateProvider, $urlRouterProvider, $pileProvider) {
        $pileProvider.debugInfoEnabled(true);

    });

Share Improve this question edited Feb 24, 2015 at 5:52 asked Feb 24, 2015 at 5:02 David Cruwys 6,88212 gold badges54 silver badges99 bronze badges

Can you post your code of your directive ?? – Anik Islam Abhi Commented Feb 24, 2015 at 5:04
Reposted with some code (do you need more or is that enough?) – David Cruwys Commented Feb 24, 2015 at 5:09
@DavidSee: can we see your full html please or a plunkr for the issue – V31 Commented Feb 24, 2015 at 5:41
does the angular versions are same of tutorial and in your code? – 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 Commented Feb 24, 2015 at 5:43

| Show 3 more ments

2 Answers 2

Sorted by: Reset to default 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.

$pileprovider.debuginfoenabled(false)

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AngularJS class ng-scope is not being added - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)