从指令在父级上启动模态答案

【问题标题】：Launching modal on parent from a directive从指令在父级上启动模态
【发布时间】：2016-03-18 03:25:45
【问题描述】：

我有一个 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')

    }
  };
});

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

【问题讨论】：

指令是通用实体。您不应从此处调用控制器方法，而应提供调用 displayReceipt 的回调方法。您需要从指令中公开一个方法
嗨，Thaniainathan，你有一个例子说明它是如何工作的吗？

标签： angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案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')

    }
  };
});

【讨论】：