Question

这是来自模板1的一行代码（模板显示用户列表）。对此的控制器是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的控制器也是MainCtrl。但问题是Line 1有效（将用户名打印到控制台），Line 2没有（它只显示为空）。我似乎无法弄清问题是什么。这是时间问题吗？模板2的加载速度是否比HTTP请求快？

Answer 1

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

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

有关服务与工厂之间的差异，see here。

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

以下是使用工厂共享数据的方法：

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，并绑定到任何控制器中的userData。无论何时需要调用getUserDetails（），所有对userData的绑定都会自动更新。

// 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>

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

1 个答案: