Question

我有一个ui.bootstrap模式的视图，它有自己的控制器。

在视图中，我有一个指令，可以生成许多具有唯一ID的按钮。

我希望能够点击其中一个生成的按钮并调用主视图的控制器来启动模式。

这是主视图模块：

/* global angular */

angular.module('my.jobs', [
  'ui.router',
  'ui.bootstrap'
])

.controller('DashboardJobsCtrl', function     DashboardJobsController($rootScope, $scope, $log, $state, $modal) {

  var self = this;

  angular.extend(this, {

displayReceipt: function(jobId) {

  var modalInstance = $modal.open({
    animation: true,
    templateUrl: 'receiptModal.html',
    size: 'lg',
    controller: function($scope, $modalInstance, jobsService) {

      //CODE HERE FOR ADDING VALUES TO THE MODAL...


        $scope.clear = function() {
          $modalInstance.close();
        };
        }
      });
    }
  });
});

这是指令：

angular.module('jobView', ['ui.router', 'ui.bootstrap'])

.directive('jobView', function($compile, $http, $templateCache, DOMAINS) {

  return {
    restrict: 'E',
    scope: {
      job: '=',
      view: '@'
},
template: 'myTemplate.html',
link: function($scope, element, attrs) {

  //ASSUME THERE IS CODE HERE FOR GENERATING UNIQUE ID FOR JOBS


  //NEXT LINE I WANT TO CALL MODAL FROM THE MAIN VIEW MODULE

  $scope.displayReceipt('jobId')

    }
  };
});

我知道这是一个简单的范围问题，但它让我疯狂，我无法建立连接。

Answer 1

这是一个完美的例子。 calling method of parent controller from a directive in AngularJS。

我已在下面更新您的示例。

<job-View updateParent='displayReceipt()'></job-View>
angular.module('jobView', ['ui.router', 'ui.bootstrap'])

.directive('jobView', function($compile, $http, $templateCache, DOMAINS) {

  return {
    restrict: 'E',
    scope: {
    job: '=',
      view: '@',
      updateParent:'&'
},
template: 'myTemplate.html',
link: function($scope, element, attrs) {

  //ASSUME THERE IS CODE HERE FOR GENERATING UNIQUE ID FOR JOBS
  //NEXT LINE I WANT TO CALL MODAL FROM THE MAIN VIEW MODULE

$scope.displayReceipt('jobId')

    }
  };
});

从指令启动父模式

1 个答案: