标签: angular-bootstrap

使用角度引导来呈现模态.但我的要求是在模式外部单击或按下退出键时防止弹出解除.

我按照角度引导网站上的教程进行了操作:http://angular-ui.github.io/bootstrap/

我知道这已被覆盖了很多次,大多数文章都引用了这段代码:AngularJS中带有自定义URL的模态窗口

但我只是不明白.我发现根本不清楚.我也发现这个jsfiddle实际上很棒,非常有帮助,除了这不添加网址并允许我使用后退按钮关闭模态.

编辑:这是我需要帮助的.

那么让我试着解释一下我想要实现的目标.我有一个表单来添加一个新项目,我有一个链接'添加新项目'.我希望当我点击"添加新项目"时,会弹出一个模式,其中包含我创建的"add-item.html"表单.这是一个新状态,因此url更改为/ add-item.我可以填写表格,然后选择保存或关闭.关闭,关闭模态:p(多奇怪).但我也可以点击返回关闭模态并返回上一页(状态). 此时我不需要Close的帮助,因为我仍然在努力实现模态的工作.

这是我的代码:

导航控制器:( 这甚至是放置模态功能的正确位置吗？)

angular.module('cbuiRouterApp')
  .controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {
    $scope.menu = [{
      'title': 'Home',
      'link': '/'
    }];

    $scope.open = function(){

        // open modal whithout changing url
        $modal.open({
          templateUrl: 'components/new-item/new-item.html'
        });

        // I need to open popup via $state.go or something like this
        $scope.close = function(result){
          $modal.close(result);
        };
      };

    $scope.isCollapsed = true;
    $scope.isLoggedIn = Auth.isLoggedIn;
    $scope.isAdmin = Auth.isAdmin;
    $scope.getCurrentUser = Auth.getCurrentUser;

    $scope.logout = function() {
      Auth.logout();
      $location.path('/login');
    };

    $scope.isActive = …

我已成功使用angular bootstrap下拉链接.但问题是下拉列表在右侧打开.我如何让它在左边打开？这是我从给定链接使用的标记和js.

标记:

<div ng-controller="DropdownCtrl">
<!-- Single button with keyboard nav -->
<div class="btn-group" uib-dropdown keyboard-nav>
    <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Dropdown with keyboard navigation <span class="caret"></span>
    </button>
    <ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>
</div>
</div>

JS:

angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];

$scope.status = …

这有点奇怪.当我在网上搜索这个问题时,我看到了许多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 …

刚刚重新安装了一些凉亭组件,但这里讨论的组件没有更新,相同0.12.0 ui.bootstrap.还ui-router 0.2.13用于将状态更改为另一个页面.

奇怪的错误信息是

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

但是当我查看ui-bootstrap-tpls.js文件时,datepicker控制器直接在daypicker之上定义,应该被选中.

这可能是由一个错误的冲突datepicker类名或其他东西引起的吗？

我知道这不是很多,但会更新,因为我有时间添加代码.似乎datepicker某处可能存在冲突.它只发生在从一个页面到另一个页面的stateChange上.使用datepicker的完整流程可以正常工作,直到最后一页.如果控制器依赖项在同一个文件中,它怎么会错过？

关于任何人以前见过的机会,我会感激任何指导.

更新4月23日15:正在使用带有表单的模态对话框,该表单会在OK单击时将用户发送到另一个页面.

当我popover点击弹出窗口外的任何地方时,我试图关闭我的Angular-bootstrap .根据这个问题的答案,现在可以通过利用新popover-is-open属性来实现(在版本0.13.4中):在单击外部时隐藏Angular UI Bootstrap popover

目前我的HTML看起来像这样:

<div
  ng-click="level.openTogglePopover()"
  popover-template="level.changeLevelTemplate"
  popover-trigger="none"
  popover-placement="right"
  popover-is-open="level.togglePopover">
  <button class="btn btn-default btn-xs" type="button">
    <span class="glyphicon glyphicon-sort"></span>
  </button>
</div>

......和我的相关控制器代码:

vm.togglePopover = false;

vm.openTogglePopover = function() {
  vm.togglePopover = !vm.togglePopover;
};

这对于在单击上面引用的按钮时打开/关闭弹出窗口非常有用.我的问题是,当点击弹出窗口外的任何地方时,我如何扩展此功能以关闭弹出窗口？我如何设置事件处理来完成此任务？

我是棱角分明的新手.我想在元素的右侧显示角度bootstrap popover中的表单错误.我试图创建指令,并在更改类时得到一个元素.但我不知道如何移动下一步.

(function(angular) {
  'use strict';
var app=angular.module('formExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);
    };

    $scope.reset = function(form) {
      if (form) {
        form.$setPristine();
        form.$setUntouched();
      }
      $scope.user = angular.copy($scope.master);
    };

    $scope.reset();
  }]);
app.directive("alert", function(){
    return {
        restrict: 'C',
        priority: -1000,
        link: function(scope, ele, attrs, ctrl){
          scope.$watch(function() {console.log(ele.attr('class')); })
          if (ctrl) {
            console.log("applying custom behaviour to input: ", ele.attr('id'));
            // ... awesomeness here
          }
        }
    };
});
})(window.angular);

我只是想显示错误消息

1. 当用户单击保存按钮时(所有表单字段错误消息)
2. 元素的模糊(仅用于失去焦点的元素)

这是我的plnkr …

我有3个根组件,由root引导AppModule.

你如何@Input()为其中一个组件指定参数？

也不

<app-modal [id]="'hard-coded value'"></app-modal>
<app-modal [id]="constantExportedByAppmodule"></app-modal>

通过AppModalComponent以下方式获取:

@Input() id: string;

这是未定义的.

升级到angular-bootstrap 1.2后,加载我的应用程序时出现此错误:

Unknown provider: $modalProvider <- $modal <- Controller

首先,我知道这些帖子:
在悬停时激活bootstrap下拉菜单
使用Hover
进行Bootstrap Dropdown 如何在悬停时使Twitter引导菜单下拉而不是单击
And others,但仍然没有找到正确的解决方案,这是我到目前为止所做的.
首先我使用angular-bootstrap下拉指令中的is-open属性,如下所示:

<span class="dropdown" dropdown is-open="status.isopen">
  <a
    href
    class="dropdown-toggle"
    ng-mouseenter="status.isopen = true"
    ng-mouseleave="status.isopen = false"
  >
    hover me for a dropdown with angular-bootstrap
  </a>
  <ul
    class="dropdown-menu"
  >
    <li ng-repeat="choice in items">
      <a href>{{choice}}</a>
    </li>
  </ul>
</span>

似乎工作但出现了2个错误:

• 第一个是当点击下拉切换元素时,下拉菜单再次点击不再将它带回来你必须鼠标左键然后鼠标进入下拉菜单以获得下拉菜单.
• 第二个是css/html问题.

通常,下拉列表的常规css解决方案如下:

<a class="css-dropdown">
  hover here with css.
  <div class="css-dropdown-menu">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
  </div>
</a>

请注意,下拉菜单现在位于下拉切换元素内,这意味着当鼠标从下拉切换到下拉菜单时,它从父级移动到子级,所以基本上我们仍然悬停在下拉式切换上,因为我们是在它的孩子,这意味着下拉菜单仍然可见,另一方面,引导下拉菜单与点击事件一起使用,因此不需要下拉菜单作为下拉切换的子项,但现在当有人想要鼠标离开下拉菜单时,将行为更改为mouseenter/hover,下拉菜单消失,因此我们无法再访问下拉菜单元素,这在此plunker中可见

为了修复第一个错误,我刚删除了dropdown指令,然后用这样的ng-class指令替换了is-open.
改变这个:

<span class="dropdown" dropdown is-open="status.isopen">

对此:

<span …