AngularJS 指令找不到所需的控制器

Question

要点是，在下面的代码中，我需要"modalDirective"来访问要创建的元素列表，该列表位于"modalController"中。我还需要"modalDirective"来创建一个HTML元素，该元素使用ng-model绑定到"modalController"中的范围变量，所以如果有另一种方法可以做这些事情中的任何一个，我完全愿意接受它。

我使用以下参数打开一个模态：

var modalOptions = {
templateUrl: 'targetUrl/modalPage.html',
controller: 'modalController'
}
ModalDialogFactory.openModal(modalOptions);

ModalDialogFactory实际上只是打开模态：

angular.module('myApp')
.factory('ModalDialogFactory', ['$modal', '$rootScope', function ($modal, $rootScope) {
var modalDialogDefaults = {
backdrop: 'static',
keyboard: false,
scope: $rootScope.$new()
};
var modalInstance;
return {
showModal: function (modalOptions) {
var modalConfig = {};
angular.extend(modalConfig, modalDialogDefaults, modalOptions);
modalInstance = $modal.open(modalConfig);
return modalInstance.result;
},
closeModal: function (selectedObjs) {
if (modalInstance != null) {
modalInstance.close(selectedObjs);
}
}
};
}]);

模式打开，控制器工作正常。目前为止，一切都好。现在，在目标页面中，我想使用一个指令：

angular.module('myApp').directive('modalDirective', function ($q, $http, $compile) {
return {
restrict: 'EAC',
compile: function(element, attr) {
return function(scope, element, attr) {
// Dynamically create new HTML elements   
}
};
});

然后在modalPage.html中，我引用了模态指令：

<div modal-directive></div>

这也有效，该指令按预期创建动态 HTML 元素。当我想将这些元素之一绑定到"modalController"中的范围变量时，就会出现问题。该指令似乎无法访问控制器，我认为这是某种范围问题，但我不确定我哪里出了问题。我尝试将这一行添加到"modalDirective"中：

require: '^^modalController',

但是当我尝试并需要控制器时，出现错误：

Error: [$compile:ctreq] Controller 'modalController', required by directive 'modalDirective', can't be found!

有谁知道我哪里出错了？

Answer 1

(假设，使用uibModal，或其他允许解析的$modal(

我知道这已经迟到了，但在浏览一些旧任务时遇到了这个问题。 您的要求问题是$modal服务将模式条目添加到控制器范围之外的 HTML 中(除非控制器是整个页面，这似乎不太可能(。

您可能希望利用$modal配置的 resolve 属性，而不是期望传递范围。 所以你会做这样的事情：

• 创建模式选项，将属性传递给解析属性
• 做你的模态事情
• 通过您已经在做的 $modalInstance.close(( 返回任何更新

它最终会像这样：

ModalDialogFactory.showModal({
resolve: {
listOfStuff: function() { return $scope.list; }
}
});

这将为您提供可以在指令中使用的scope.listOfStuff。