标签: angular-ui-modal

这有点奇怪.当我在网上搜索这个问题时,我看到了许多Google搜索结果和SO解决方案...但似乎没有一个工作!

简而言之,我正在尝试实现AngularUI Bootstrap Modal.我一直收到以下错误:

错误:[$ injector:unpr]未知提供者:$ uibModalInstanceProvider < - $ uibModalInstance < - addEntryCtrl

这是我的HTML:

<nav class="navbar navbar-default">
  <div class="container">
    <span class="nav-col" ng-controller="navCtrl" style="text-align:right">
      <a class="btn pill" ng-click="open()" aria-hidden="true">Add New</a>
    </span>
  </div>
</nav>

这是我的控制器:

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

app.controller('navCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
  $scope.open = function() {
    var uibModalInstance = $uibModal.open({
      animation: true,
      templateUrl: 'addEntry/addEntry.html',
      controller: 'addEntryCtrl',
    });
  };
}]);

最后,这是我的模态代码:

var app = angular.module('addEntry', ['firebase', 'ui.bootstrap']);

app.controller('addEntryCtrl', ['$scope', '$firebaseObject', '$state', '$uibModalInstance', function($scope, $firebaseObject, $state, $uibModalInstance) {
  $scope.cancel …

AngularJS的官方文档不包含任何描述如何$uibModalInstance.close工作的东西,在下面的代码片段中,scope.close是用于关闭模态窗口并将对象传递给调用者控制器的方法

var app = angular.module('myApp');

app.controller('ModalController', ['$uibModalInstance', modalControllerFn]);

function modalControllerFn($uibModalInstance) {
    var scope = this;

    // some data object
    scope.data = {key1: "value1", key2: "value2"};

    scope.close = function() {
        $uibModalInstance.close(scope.data);
    }
}

问题(1)

使用$uibModalInstance.close(非文字值,即:)传递属于模态范围的任何内容是否scope.x可以防止角度垃圾收集破坏整个模态范围？这是导致内存泄漏的情况吗？

问题2)

角度$uibModalInstance.close(data)究竟如何工作？

我正在使用来自另一个控制器的$ uibModal.open打开一个模态窗口,并且需要在模态窗口完全关闭时通知(而不是在关闭期间...)所以我将能够运行一个函数.

打开模态的代码如下:

var modalInstance = $uibModal.open({
  templateUrl: "myModalContent.html",
  controller: "termModalCtrl",
  windowClass: 'app-modal-window',
  resolve: {
    'params': function () { return id }
  }
});

我看到了一些建议的解决方案:

modalInstance.result.then(function(result) {
});

问题是在实际关闭模态窗口之前调用函数回调(当模态窗口仍然打开时),这不是我想要的行为,因为它意味着它捕获"关闭"事件而不是"封闭的"模态事件".

有一个简洁明了的方法来实现这个吗？如果没有,我会感到惊讶,因为这种行为在地球上的任何UI框架中都很常见......

请帮忙!

我正在使用Angular中的Bootstrap UI(https://angular-ui.github.io/bootstrap/)中的模态组件来渲染模态,并且在关闭时我希望能够重定向到另一个状态,或者至少有一个函数被调用.

问题是我可以拦截close事件,但每当我用户按下Esc模态时,我就会被解除,而且找不到任何捕获dismiss事件的文档或者为返回的promise指定一个函数.

代码如下:

var modalInstance = $uibModal.open({
  templateUrl: 'a-template.html',
  controller: 'AnotherCtrl',
  controllerAs: 'modal',
  backdrop: false,
  size: 'lg'
});

// I am able to catch this whenever the user exits the modal in an
// orthodox fashion. Doesn't happen when he presses Esc button.
modalInstance.closed = function () {
  $state.go(homeState); 
};

或者,另一种适合我的商业案例的解决方案是简单地不允许用户解雇模态.每当模态控制器中发生事件时自己关闭它.到目前为止我都没有找到这方面的功能.

我在另一个 html 文件中有一个模式模板，但在页面加载后，第一次模式窗口打开时没有内容，第二次一切正常。如何解决这个问题？

这是骗子http://plnkr.co/edit/lw056nAaU7BfqIVZSddb?p=preview

//Open modal on main page with:
<div ng-controller="ModalDemoCtrl">
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>

我想在打开ui bootstrap模式时暂时更改浏览器URL(后面的页面应保持原样,只有url更改).当模态关闭时,URL应该恢复为原始模式.

脚步 :

1. 用户加载页面
   • 网址:xyz.com/home
2. 用户点击链接打开模态
   • url:xyz.com/detail/123
   • 可能的解决方案:使用html5推送状态更改URL
   • 问题:Angular ui-router尝试按照更改的URL运行其路由,最终更改后台页面.
3. 用户关闭模态
   • 网址:xyz.com/home
   • 可能的解决方案:html5 pop状态
   • 问题:重新加载背景页面,这会杀死目的

示例实现:Pinterest引脚及其引脚详细信息弹出.

我有这两种观点:

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');
     };
}]);

我需要注入$uibModalInstance到fooController该.dismiss工作

当我foo-as-modal.html作为模态调用时,这很有效,即:

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

但是当我foo.html作为普通视图(via $routeProvider和ng-viewdirective)调用时,它会抛出错误,即:

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

错误是: …

$ uibModalInstance是否有任何属性,如.ready或.opened？我试图根据传递给它的数据更改UI Bootstrap模式中的CSS类元素.加载模态后,我需要一种方法来触发函数.我知道$ uibModal具有.opened,.close和.rendered等属性,但这会在创建模态的控制器中触发,而不是在模态控制器本身内.由于所有数据都在模态控制器内,因此我无法从外部控制器访问它.

有什么建议？