Question

我正在尝试使用AngularJS构建我的应用程序，并且我遇到了$ scope context的问题。

这是我的应用主文件：

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: '/' });
});

我有一个调用matchController的控制器。它看起来像这样，只需用我的匹配工厂的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;
                });
        };
    });

在这里，工厂。我使用Laravel作为API后端来捕获数据，所有路径“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与我的主视图中的不同。然后，我无法访问我的$ scope.place变量并将其用于视图。

Answer 1

向索引添加控制器以访问其范围

<!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" ng-controller="MatchController">
        <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>

Answer 2

您还可以在

添加ng-controller

<div class="place text-center" ng-controller="MatchController">
    <ul>
        <li>{{ place.name }}</li>
    </ul>
</div>

Answer 3

在此上下文中，模块无法引用控制器，因为它最后在其index.html

中声明

请将订单更改为下一个，然后重试。

<body class="container" ng-controller="MatchController">
        <div ng-view></div>
        <!--Note the file app.js come before others-->
        <script src="js/app.js"></script>
        <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>
    </body>

angularJS中的$ scope错误

3 个答案: