javascript - Angular UI Modal Controller 未暴露于指令

我需要创建一个可以在Angular UI模式内使用的指令。为了使用模态 Controller 的某些功能，该指令还需要了解模态 Controller 。我现在所拥有的:

JS:

'use strict';

var DemoApp = angular.module('DemoApp', [ 'ui.bootstrap' ]);

DemoApp.controller('PageController', ['$scope', '$modal', function($scope, $modal){
  $scope.openModal = function(){
    var scope = $scope.$new(true);

    $modal.open({
      'templateUrl' : 'modal.html',
      'controller' : 'ModalController',
      'scope' : scope
    });
  }
}]);

DemoApp.controller('ModalController', ['$scope', '$modalInstance', function($scope, $modalInstance){
  $scope.ok = function() {
    $modalInstance.dismiss();
  };

  $scope.cancel = function() {
    $modalInstance.dismiss();
  };
}]);

DemoApp.directive('expression', function() {
  return {
    restrict : 'A',
    require : ['ngModel', '^ModalController'],
    link : function(scope, element, attrs, controllers) {
      console.log(arguments);
    }
  };
});

模态模板:

<div class="modal-header">
  <h3>Test!</h3>
</div>
<div class="modal-body">
  <input data-ng-model="someValue" expression>{{someValue}}
</div>
<div class="modal-footer">
  <button class="btn btn-primary" data-ng-click="ok()">Ok</button>
  <button class="btn btn-warning" data-ng-click="cancel()">Cancel</button>
</div>

和红色按钮:

<button id="demoButton" class="btn btn-primary" data-ng-click="openModal()">Click me!</button>

但是创建模态时ModalController无法解析，并且我收到$compile:ctreq错误:

Error: [$compile:ctreq] http://errors.angularjs.org/1.2.17/$compile/ctreq?p0=ModalController&p1=expression
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:6:450
    at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:80)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:137
    at Array.forEach (native)
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:7:280)
    at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:114)
    at N (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:54:128)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:47:82)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:47:99) <input data-ng-model="someValue" expression="" class="ng-pristine ng-valid">

我尝试调试代码:getControllers()处约6433 LOC处的angular.js用于搜索 Controller :value = value || $element[retrievalMethod]('$' + require + 'Controller');，因此我尝试要求使用Modal而不是ModalController(Controller由Angular附加)，但这并没有帮助。我不明白$element[retrievalMethod]的工作原理(进入了它，但它是底层的)。因此，我很困惑，不胜感激。

我创建了一个Plunk，因此您可以在控制台中播放并查看我的意思。

最佳答案

请 check out 更新的plunker:

ModalController作用域不是PageController的子作用域，因此，如果您需要将变量传递给ModalController，则应直接解决依赖关系。

在您的指令中，您可以将scope设置为ModalController范围的子级，因此您可以访问在那里定义的函数，而无需ModalController。