javascript - 无法访问模板中的范围数据

Question

这是模板 1 中的一行代码(该模板显示用户列表)。其 Controller 是 MainCtrl。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" ng-controller="MainCtrl">

<a data-toggle="modal" data-target="#configureUserModal" href="#" ng-click="getUserDetails(user.id)">{{user.name}}</a>

</div>

<modal-configure-user></modal-configure-user>

我的MainCtrl中的相关代码是:

angular.module('app')
.controller('MainCtrl', ['$scope', '$http', '$window', '$rootScope', '$routeParams', '$timeout', function(
    $scope, $http, $window, $rootScope, $routeParams, $timeout) {

$scope.getUserDetails = function (userId) {
        $http.get("/user/" + userId).success(function(data) {
            $scope.userData=data[0];
            console.log($scope.userData.name); //Line 1
        });
};

}]);

现在，当单击模板 1 中的用户名时，将打开针对个人用户的模板 2。我只想在模板 2 中显示用户名，所以我这样做:

<div class="modal fade" id="configureUserModal" tabindex="-1" role="dialog" ng-controller="MainCtrl">

{{userData.name}} //Line 2

</div>

模板 2 的 Controller 也是 MainCtrl。但问题是 Line 1 有效(将用户名打印到控制台)，Line 2 无效(它只是显示为 null)。我似乎无法弄清楚问题是什么。是时间问题吗？模板 2 的加载速度是否比 HTTP 请求快？

Answer 1

每个 ng-controller 声明都会获得自己的 Controller 实例以及 $scope。更改一个 ng-controller 范围内的数据不会影响另一个。

如果您想共享数据，您应该使用 Angular 服务。我将演示如何使用 Angular 工厂来共享数据，但您也可以轻松实现服务。

对于服务与工厂之间的差异，see here .

Angular 服务和工厂是单例，这意味着在注入(inject)它们的任何地方都使用同一个实例。这使得它非常适合共享数据。

以下是如何使用工厂共享数据:

var app = angular.module('app', []);
app.factory('userDetailService', function($http) {    
    var userData = {};
    function getUserDetails(userId) {
       return $http.get("/user/" + userId).success(function(data) {
           // copy is used to preserve the reference
           angular.copy(data[0], userData);
           console.log(userData.name);
        });
    }
    return {
        userData: userData,
        getUserDetails: getUserDetails
    }

});

然后您可以调用 userDetailService，并绑定(bind)到任何 Controller 中的 userData。每当需要时调用 getUserDetails()，所有与 userData 的绑定(bind)都会自动更新。

// controller 1
app.controller('controller1', function($scope, userDetailService) {
    $scope.userData = userDetailService.userData;
    userDetailService.getUserDetails('johnsmith').success(function() {
          // success - do anything else here if you want
    });
});


// controller 2
app.controller('controller2', function($scope, userDetailService) {
    $scope.userData = userDetailService.userData;
});

HTML

<div ng-controller="controller1">
     {{userData.name}}
</div>

<div ng-controller="controller2">
     {{userData.name}}
</div>