这是模板 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 请求快?
最佳答案
每个 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>
关于javascript - 无法访问模板中的范围数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27377082/