I'm trying to use AngularJS to build my application, and I'm faced to a problem with the $scope context.
This is my app main file :
var app = angular.module('app',
[
'matchCtrl',
'matchService',
'ngRoute'
]);
app.config(function($routeProvider){
$routeProvider
.when('/', { templateUrl: '../app/views/partials/home.html' })
// all routes for matches
.when('/matches', { templateUrl: '../app/views/partials/matches.html', controller: "matchController" })
.when('/matches/:id', { templateUrl: '../app/views/partials/match_place.html', controller: "matchController" })
.otherwise({ redirectTo: '/' });
});
I've got one controller that's call matchController. It look like this and have just to catch the data with the get and show method of my match factory.
Here, the controller :
angular.module('matchCtrl', [])
.controller('matchController', function($scope, $http, Match) {
// object to hold all the data for the new match form
$scope.matchData = {};
// loading variable to show the spinning loading icon
$scope.loading = true;
// get all the matches first and bind it to the $scope.matches object
Match.get()
.success(function(data) {
$scope.matches = data;
$scope.loading = false;
});
$scope.showPlaces = function(id) {
$scope.loading = true;
console.log($scope);
Match.show(id)
.success(function(data){
$scope.places = data;
console.log($scope.places);
$scope.loading = false;
});
};
});
Here, the factory. I'm using Laravel as an API Backend to catch data, and all routes "api/*" are defined in my Laravale routes file.
angular.module('matchService', [])
.factory('Match', function($http) {
return {
get : function() {
return $http.get('api/matches');
},
show : function(id) {
return $http.get('api/matches/' + id);
},
}
});
Here my index file, and my partial where I want to use the $scope.place variable.
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Laravel and Angular test</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script>
</head>
<body class="container">
<div ng-view></div>
<script src="js/controllers/matchCtrl.js"></script>
<script src="js/controllers/placeCtrl.js"></script>
<script src="js/services/matchService.js"></script>
<script src="js/services/placeService.js"></script>
<script src="js/app.js"></script>
</body>
</html>
The partial view :
<div class="place text-center">
<ul>
<li>{{ place.name }}</li>
</ul>
</div>
My problem is that on the partial view, the $scope is not the same that in my main view. And then, I can't access to my $scope.place variable and use it into the view.
