AngularJS $范围问题答案

【问题标题】：AngularJS $scope issueAngularJS $范围问题
【发布时间】：2014-01-26 22:26:06
【问题描述】：

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

编辑：路由是否可能不起作用 - 即 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));

views/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>

【问题讨论】：

我猜你没有意识到每次初始化控制器时它都是一个新实例。在您的情况下，您在每个路径中使用相同的控制器，如果您尝试跨路径保存数据将需要一个服务来做到这一点
@charlietfl 其他视图只是作为演示，最终将更改为引用他们自己的控制器。无论如何，这并不能解释为什么 Loops 视图没有使用来自 Loops 控制器的数据进行更新...？
不太清楚first div in view creates own scope 的意思。 plunker 中的演示会有所帮助

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

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

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

【讨论】：