【发布时间】:2014-03-14 14:02:06
【问题描述】:
我正在使用模态构建一个角度应用程序,我想在我的控制器之间传递一些数据以填充我的模态视图。
我的主控制器是 JobListCtrl,当我单击应该调用模式的链接时会触发 callReportModalData。我使用服务 reportJobModalData 来存储数据并在控制器之间传递。
var myApp = angular.module('myApp', []);
myApp.controller('JobListCtrl', ['$scope', '$element', '$http', '$log', 'reportJobModalData', function ($scope, $element, $http, $log, reportJobModalData) {
$scope.reportJobModalData = reportJobModalData;
$scope.callReportModal = function(test){
reportJobModalData.test = test;
}
}]);
myApp.service('reportJobModalData', function(){
this.test = '';
});
我的模态控制器和指令定义如下:
myApp.controller('reportJobCtrl', function ($rootScope, $scope, $http, $log, reportJobModalData) {
$scope.$log = $log;
$scope.reportJobModalData = reportJobModalData;
$scope.test = reportJobModalData.test;
$log.info('test: ' + reportJobModalData.test);
});
myApp.directive('sjReportJobModal', ['$rootScope', '$log', '$http', 'reportJobModalData', function ($rootScope, $log, $http, reportJobModalData) {
return {
restrict: 'E',
templateUrl: 'report-job-modal-tpl',
replace: true,
transclude: true,
link: function (scope) {
}
};
}]);
我使用的模板是这个:
<div class="modal fade" id="reportJobModal" tabindex="-1" role="dialog" aria-labelledby="reportJobModalLabel" aria-hidden="true" ng-controller="reportJobCtrl">
<div class="modal-content ease">
<section>
{{ reportJobModalData.test }}
</section>
</div>
<div class="modal-overlay ease" data-dismiss="modal"></div>
</div>
这里的数据在模态框上正确打印。但是我无法访问控制器中的数据,即 $scope.test 是空的,因为我只在控制台上登录了 'test :'。
我做错了什么?
非常感谢您的帮助
【问题讨论】:
标签: javascript jquery angularjs controller angularjs-directive