Angular UI模态控制器不暴露给指令

Angular UI Modal controller is not exposed to directives

本文关键字：暴露 指令 控制器 UI 模态 Angular      更新时间：2023-09-26

我需要创建一个可以在Angular UI modal中使用的指令。这个指令还需要知道modal的控制器，以便使用它的一些功能。我现在有:

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()在angular.js的6433 LOC附近用于搜索控制器:value = value || $element[retrievalMethod]('$' + require + 'Controller');，所以我试图要求Modal而不是ModalController (Controller由Angular附加)，但它没有帮助。我不能理解$element[retrievalMethod]是如何工作的(踏入它，但它是低级别的)。所以，我被困住了，谢谢你的帮助。

我已经创建了一个Plunk，所以你可以在控制台播放并看到我的意思

请查看更新后的plunker:

  1. ModalController作用域不是PageController的子作用域，所以如果你需要将变量传递给ModalController，你应该通过直接解析依赖关系来实现。

  2. 在你的指令中，你可以将作用域设置为ModalController作用域的子作用域，这样你就可以访问那里定义的函数，而不是需要ModalController。

相关文章：