AngularJS $scope issue

Question

I'm having an issue with Angular scope, specifically where I can't get the data to be injected into my view. I understand that the ng-repeat creates it's own scope, as well as ng-view, but for whatever reason, the first div in my view (loops.html - #main-content-wrapper) is also creating it's own scope. Why?

EDIT: Is it possible that routes are not working - i.e. that the Loops controller isn't being attached to 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 (relevant part):

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

I'm guessing you aren't recognizing that every time you initialize a controller it is a new instance. In your case, you use same controller in each path, if you are trying to preserve data across paths will need a service to do it — charlietfl
– charlietfl, Commented Jan 26, 2014 at 23:16
@charlietfl the other views are just there as demonstration & will eventually be changed to reference their own controllers. Regardless, that doesn't explain why the Loops view isn't being updated with the data from the Loops controller...? — SeekingCharlie
– SeekingCharlie, Commented Jan 26, 2014 at 23:25
not really clear what you mean by first div in view creates own scope. A demo in plunker would help — charlietfl
– charlietfl, Commented Jan 26, 2014 at 23:41

dimirc · Accepted Answer · 2014-01-27 01:38:53Z

1

Inside the ng-repeat, use loop not loops

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

answered Jan 27, 2014 at 1:38

dimirc

6,7753 gold badges26 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

AngularJS $scope issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related