angularjs - 在控制器之间传递数据 [英] angularjs - passing data between controllers

问题描述

我正在使用模态构建一个 Angular 应用程序，我想在我的控制器之间传递一些数据以填充我的模态视图.

我的主控制器是 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 = 函数(测试){reportJobModalData.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) {返回 {限制:'E'，templateUrl: 'report-job-modal-tpl',替换:真的，转置:真实，链接:功能(范围){}};}]);

我使用的模板是这个:

<div class="modalfade" id="reportJobModal" tabindex="-1" role="dialog" aria-labelledby="reportJobModalLabel" aria-hidden="true" ng-controller="reportJobCtrl"><div class="modal-content ease"><部分>{{ reportJobModalData.test }}</节>

<div class="modal-overlay easy" data-dismiss="modal"></div>

这里的数据正确打印在模态上.但是我无法访问控制器中的数据，即 $scope.test 是空的，因为我只在控制台上记录了 'test :'.

我做错了什么?

非常感谢您的帮助

解决方案

尝试对服务变量应用监视，它似乎在 joblistctrl 中设置值时，您的 reportjobctrl 被执行.

所以把这段代码放在 reportjobctrl 中，让我知道结果

$scope.$watch(function(){返回 reportJobModalData.test},功能(新，旧){$scope.test=new;});

I am building an angular app using modals and I'd like to pass some data between my controllers to populate my modal view.

My main controller is JobListCtrl and callReportModalData is triggered when I click on the link supposed to call the modal. I use the service reportJobModalData to store the data an pass it between controllers.

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 = '';

});

My modal controller and directive are defined as follow:

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) {
    }
  };
}]);

and the template I use is this one:

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

Here the data get printed properly on the modal. However I cannot access the data in the controller, i.e. $scope.test is empty as I only get 'test :' logged on the console.

What am I doing wrong?

Thanks a lot for your help

解决方案

try applying a watch on the service variable it seems by the time when the value is set in joblistctrl, your reportjobctrl gets executed.

so place this code in reportjobctrl and let me know the results

$scope.$watch(function(){
return reportJobModalData.test},

function(new,old){
$scope.test=new;
});

这篇关于angularjs - 在控制器之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！