Question

我遇到了Angular范围的问题，特别是我无法将数据注入到我的视图中。我知道ng-repeat创建了它自己的范围，以及ng-view，但无论出于何种原因，我视图中的第一个div（loops.html - #main-content-wrapper）也创建它＆＃39;自己的范围。为什么呢？

编辑：路由是否可能无法正常工作 - 即Loops控制器没有连接到ng-view？

App.js：

'use strict';

angular.module('testApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute'
])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
  .when('/', {
    templateUrl: 'views/loops.html',
    controller: 'LoopCtrl'
  })
  .when('/live', {
    templateUrl: 'views/live.html',
    controller: 'LoopCtrl'
  })
  .when('/inputs', {
    templateUrl: 'views/inputs.html',
    controller: 'LoopCtrl'
  })
  .when('/menu', {
    templateUrl: 'views/menu.html',
    controller: 'LoopCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
}]);

/controllers/loops.js：

(function (angular) {
  'use strict';

angular.module('testApp')

.controller('LoopCtrl', ['$scope', '$http', function ($scope, $http) {

    $http.get('loops.json').success(function(data) {
        $scope.loops = data;
    });

}]);

}(this.angular));

视图/ loops.html：

<div id="main-content-wrapper">
<div id="main-content">
    <article>
        <header>
            <h1>Select your loop channel</h1>
        </header>

        <div ng-repeat="loop in loops">
            <h1>{{loops.title}}</h1>
            <span>{{loops.duration}}</span>
        </div>
    </article>
</div>
</div>

index.html（相关部分）：

<body ng-app="testApp">
   <div id="container" ng-view>
   </div>
</body>

Answer 1

在ng-repeat中，使用loop而不是loops

<div ng-repeat="loop in loops">
       <h1>{{loop.title}}</h1>
       <span>{{loop.duration}}</span>
</div>

AngularJS $范围问题

1 个答案: