Question

我正在遵循Angular Tutorials，我在他们的示例中看到 ng-scope 被添加到带有指令的每个元素。

https://docs.angularjs.org/guide/scope

但是我自己的代码不为每个指令添加 ng-scope ，每件事似乎都是通过呈现数据来实现的，但由于某种原因，这个CSS类是没有添加。

我的应用程序已从Yeoman.io启动项目开始，所以我不确定该项目中的某些内容是否导致了该问题。

https://github.com/diegonetto/generator-ionic

我在我的保管箱中添加了www码作为.zip：

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

我尝试在＆amp;上设置debugInfoEnabled关闭使用以下

.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
        $compileProvider.debugInfoEnabled(false);

    });

和

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

    });

Answer 1

检查javascript中是否添加了以下代码行。这通常会删除调试信息，即Ng-scope。通常会添加此选项以提高生产代码的性能。

$compileprovider.debuginfoenabled(false)

Answer 2

ionic-angular.js重写了addClass函数。

以下是摘录。

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

由于if条件ng-scope和ng-isolate-scope类没有被添加，即使启用了debuggingInfo。

未添加AngularJS类ng-scope

2 个答案: