当前位置: 首页 > 面试题库 >

将$ uibModalInstance注入到不是由$ uibModal启动的控件中

南门鸿雪
2023-03-14
问题内容

我有以下两种观点:

1)foo.html

  <p>Hello {{name}}</p>

2)foo-as-modal.html

<div class="modal-header">
    <h3 class="modal-title">I'm a modal</h3>
</div>
<div class="modal-body">
    <ng-include src="'foo.html'"></ng-include>
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Close</button>
</div>

foo.html的控制器是fooController

angular.module('myApp').controller('fooController', ['$scope','$uibModalInstance', function($scope,$uibModalInstance) {

     $scope.name = "John"

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

我需要注入$uibModalInstancefooController.dismiss工作

当我foo-as-modal.html作为模式调用时,效果很好,即:

    var modalInstance = $uibModal.open({
        templateUrl: 'foo-as-modal.html',
        controller: 'fooController',
        scope: $scope.$new(),
        size: 'lg'
    });

但是当我foo.html以普通视图(通过$routeProviderng-view指令)调用时,它会引发错误,即:

    .when('/foo', {
        templateUrl: 'foo.html',
        controller: 'fooController'
    })

错误是:

 Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- fooController

而且该视图不显示“ John”(由于错误)

我该如何解决?我真的需要重用,foo.html并且fooController作为模态和非模态,因为它们有很多东西(在这里我已经简化了)

编辑:这是一个笨拙的人:

https://plnkr.co/edit/9rfHtE0PHXPhC5Kcyb7P


问题答案:

好吧,我这样解决了:

  1. 删除了注射$uibModalInstancefooController
  2. 调用模态时, 我将modalInstance作为变量传递给模态的范围:
        var modalScope = $scope.$new();

    var modalInstance = $uibModal.open({
        templateUrl: 'foo-as-modal.html',
        controller: 'fooController',
        scope: modalScope
    });

    modalScope.modalInstance = modalInstance;
  1. 使用范围变量关闭模态:
    $scope.modalInstance.dismiss('cancel');  // instead of $uibModalInstance.dismiss(..)
    

这是原始plunkr的分支,带有以下解决方案:https
://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5



 类似资料:
  • 问题内容: 我已经尽一切努力让ui路由器解析将其值传递给给定的控制器AppCtrl。我正在使用依赖注入,这似乎引起了问题。我想念什么? 路由 控制者 编辑 这是一个小家伙http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview 问题答案: 在将路由解析参数用作绑定到该路由的控制器中的依赖项注入时,由于名称不存在的服务提供程序,因此不能将该控制器与ng-

  • 将服务用作控制器的依赖和将服务用作其他服务的依赖很类似。 因为Javascript是一种动态语言,依赖注入系统无法通过静态类型来知道应该注入什么样的服务(静态类型语言就可以)。所以,你应该$inject的属性来指定服务的名字,这个属性是一个包含这需要注入的服务的名字字符串的数组。名字要和服务注册到系统时的名字匹配。服务的名称的顺序也很重要:当执行工场函数时传递的参数是依照数组里的顺序的。但是工场函

  • 问题内容: 例如,我有一个页面,我需要包括Google Map 库,并仅包含一个专门用于此页面的 .js 文件 (例如location.js) 。 我想在这行之后注入这两个文件 是否有可能做到这一点? 注意:我使用的是Sails.js v0.10 问题答案: Sails 在其视图渲染中使用,因此您可以使用块来完成所需的操作。 在您的文件中,在下方添加(例如): 然后在您要提供服务的视图中,使用您的

  • 生产者方法对于以编程方式创建实例并在上下文中发布它们非常有用。问题是由创建并由生产者方法返回的实例的所有属性都不是由CDI注入的。在焊接留档中,我读到这是一种有意的行为,但在许多情况下,注入这些豆子会非常有用。 是否有一个变通方法来允许注入到这样的bean中?