0
AngularJS를 사용하여 응용 프로그램을 빌드하려고하는데, $ scope 컨텍스트에 문제가 있습니다.
이 내 응용 프로그램의 주요 파일 : 나는 이제 matchController 전화를 하나의 컨트롤러를 가지고
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: '/' });
});
. 이것은 마치 내 매치 팩토리의 get 및 show 메소드를 사용하여 데이터를 캐치해야합니다. 여기
, 컨트롤러 : 여기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;
});
};
});
, 공장. API 백엔드로 Laravel을 사용하여 데이터를 캐치하고 모든 경로 "api/*"이 내 Laravale 경로 파일에 정의되어 있습니다.
angular.module('matchService', [])
.factory('Match', function($http) {
return {
get : function() {
return $http.get('api/matches');
},
show : function(id) {
return $http.get('api/matches/' + id);
},
}
});
여기 내 인덱스 파일과 $ scope.place 변수를 사용하고자하는 부분입니다.
<!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>
부분보기 :
<div class="place text-center">
<ul>
<li>{{ place.name }}</li>
</ul>
</div>
내 문제는 부분보기에, $ 범위 내 기본보기에서 그 같은되지 않는 것입니다. 그리고 나서 $ scope.place 변수에 액세스하여 뷰에 사용할 수 없습니다.
기본보기에서 범위를 만드는 ng 컨트롤러 지시문이 보이지 않습니다 ... –
아, 알겠습니다. 나는 어리 석다. 나는 main view에 ng-controller = "matchController"속성을 주면된다. 그런 다음 부분보기를 위해 내 경로에 다른 컨트롤러를 넣을 수 있습니까? – Lilrom
정확히 그때 당신은 컨트롤러를 추가 할 수 있습니다 u의 경로를 변경하면 ... ui 라우터를 찾을 수 없을 때 당신이 그것을 찾고 있지만, 정말 각도에서 라우팅 패러다임이 솔루션을 권장합니다 ... –