I'm building a MEAN app and used yeoman to scaffold the client side code. I have a controller and view called movies.
Here is the movie controller:
'use strict';
/**
* @ngdoc function
* @name clientApp.controller:MoviesCtrl
* @description
* # MoviesCtrl
* Controller of the clientApp
*/
angular.module('clientApp')
.controller('MoviesCtrl', function () {
this.movies = [
{
title: 'A New Hope',
url: 'http://youtube.com/embed/1g3_CFmnU7k'
},
{
title: 'The Empire Strikes Back',
url: 'http://youtube.com/embed/96v4XraJEPI'
},
{
title: 'Return of the Jedi',
url: 'http://youtube.com/embed/5UfA_aKBGMc'
}
];
});
Here is the movie view:
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{movie.title}}</td>
<td>{{movie.url}}</td>
</tr>
</tbody>
</table>
{{movies}}
When I view the page in my browser, the ng-repeat doesn't work (nothing is printed out), but where I explicitly print out {{movies}} in the view, I see the movies json that I defined in the controller. So, I know that the view has access to the controller's scope.
Why isn't ng-repeat working even when the view has access to the controller's scope?
In order to use this.movies, you need to use controller AS syntax (MovieCtrl as ctrl). Even so, you may run into problems if you don't save controller object (e.g., vm = this)
The way you have it now, you need to assign to $scope instead of this
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments