标签: angular-ui-bootstrap

我有一个包含多个行的表,每个都可以选择,第一列是一个使用bootstraps popover(UI Bootstrap Angular)的信息按钮.

<span class='glyphicon glyphicon-info-sign' popover-placement='right' popover='my notes to display'></span>

当我点击该项目时,我希望它不要选择它背后的项目.

我知道这可以使用e.preventDefault和e.stopPropagation()完​​成,我如何用bootsrap UI实现它？

谢谢

假设我有一个带有rows和col-lg-xs 的典型bootstrap布局

<div class="content container">
    <div class="row">
        <div class="col-lg-5">

        </div>
        <div class="col-lg-7">

        </div>
    </div> 
</div>

是否有任何插件(最好是有角度的,但也有其他插件)在2列之间制作一个可拖动的分隔线,以便用户调整宽度？

就像在这个例子中(Tab#2)一样,除了它应该"捕捉"到bootstrap可能的col-lg-xx组合,如col-6/col-6,col-5/col-7,col-4/col-8.

我想把一只$ watch放在AngularJS Modal里面的一个单选按钮上.但是,对于任何值更改,$ watch在模态内部都不起作用.

如果我尝试将单选按钮放在模态外,$ watch的效果非常好.

http://plnkr.co/edit/q8t9qGJg57MMiQGop202?p=preview

在上面的plunkr中,如果你单击打开我并选择上面的2个单选按钮(我,你)$ watch不会被触发,反过来你不能看到带有值的警报.

但是,如果您单击主页面中的单选按钮(即外部窗口),$ watch可以正常工作并抛出警报消息.

有没有人有解决这个问题的方法？谢谢

我需要在模态中使用ngInfiniteScroll作为库,但它似乎无法工作.它不接受在此Bootstrap UI模式中滚动.你知道怎么做这个,请告诉我!谢谢.

https://github.com/sroze/ngInfiniteScroll

http://angular-ui.github.io/bootstrap/#/modal

将函数传递给角度ui bootstrap模态对话框的最佳方法是什么？我在我的模态控制器中创建了一个方法,它调用$ scope.$ parent.myMethod(),如下所示:

$scope.isChosen = function(concept) {
    return $scope.$parent.isChosen(concept);
};

这是有效的,但我宁愿将函数传递给模态,其方式与将函数传递给指令的方式类似.我试图使用模态"resolve"参数来做到这一点,但没有成功.是否可以解析模态的函数,如果是,那么语法是什么？如果不可能,除了访问父作用域之外,还有其他方法可以做到这一点吗？

编辑:这是一个尝试将方法传递给模态的插件,它有点简化,但代表我正在尝试做的事:http://plnkr.co/edit/eCjbZP

嗨,我正在尝试从UI Bootstrap中获取下拉指令.每当我尝试使用'dropdown'指令时,我都会收到以下错误消息:

控制台错误消息:

Multiple directives [dropdown, dropdown] asking for 'dropdown' controller on: <li class="dropdown pos-stc" dropdown="">
http://errors.angularjs.org/1.3.9/$compile/multidir?p0=dropdown&p1=dropdown&p2='dropdown'ontroller&p3=%3Cli%class%3D%dropdown%20pos-stc%22%20dropdown%3D%22%22%3E
    at http://localhost:9000/bower_components/angular/angular.js:63:12
    at assertNoDuplicate (http://localhost:9000/bower_components/angular/angular.js:7990:15)
    at applyDirectivesToNode (http://localhost:9000/bower_components/angular/angular.js:7339:11)
    at compileNodes (http://localhost:9000/bower_components/angular/angular.js:6997:15)
    at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7009:15)
    at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7009:15)
    at compile (http://localhost:9000/bower_components/angular/angular.js:6904:15)
    at link (http://localhost:9000/bower_components/angular/angular.js:22225:9)
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8213:9)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7722:11) angular.js:11594(anonymous function) angular.js:11594(anonymous function) angular.js:8544invokeLinkFn angular.js:8215nodeLinkFn angular.js:7722compositeLinkFn angular.js:7075publicLinkFn angular.js:6954boundTranscludeFn angular.js:7093controllersBoundTransclude angular.js:7749(anonymous function) angular.js:22173processQueue angular.js:13171(anonymous function) angular.js:13187Scope.$eval angular.js:14384Scope.$digest angular.js:14200Scope.$apply angular.js:14489done angular.js:9646completeRequest angular.js:9836requestLoaded

有人能告诉我这个错误是什么吗？当我删除指令一切都很好,除了下拉菜单不起作用:(

HTML:

  <li class="dropdown" dropdown>
    <a href class="dropdown-toggle clear" dropdown-toggle>
      <span class="thumb-sm avatar …

我想将整个对象传递给模态,所以我可以在那里查看它的所有属性.现在我的项目看起来像这样:

$scope.items = [{ Title: title, Id: id }] 

在我的html页面中,我正在使用'ng-repeat',如下所示:

<tr ng-repeat="item in items | filter:search">
<td> {{item.Title}} </td>
<td> {{item.Id}} </td>
<td> <button ng-controller="ModalDemoCtrl" type="button" ng-click="viewItem(item)" class="btn btn-primary">View Item</button> </td>

和我的模态html页面:

<div class="modal-header">
  <h3>{{Title }}</h3>
</div>
<div class="modal-body">
  <p>{{ Id }}</p>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">OK</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

只够看看我们是否可以获得两个值.

但我不知道我的modalController应该是什么样子,我似乎无法将整个项目(目前只有标题和id)传递给模态视图.

在制作我的控制器时,我在angular bootstrap github页面上跟随了这个例子:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

$scope.viewItem = function () {

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: { …

如何在控制器中提供数据？我创建了一个非常简单的Plunk,它应该在模态中显示$ scope的数据.然后我需要更新数据,并且只在点击"确定"时更新$ scope.单击"取消"将放弃更改.

但在我开始这一步之前,我需要让范围可用于模态.大多数示例使用两个控制器.我是否需要另一个控制器,如下例所示:将数据传递给Angular中的Twitter Bootstrap模式？在我的控制器中,我有以下内容:

$scope.open = function(){
  var modalInstance = $uibModal.open({
    templateUrl: 'modal.html',
    controller: 'ModalInstanceController',
    resolve: {
      users: function() {
        return $scope.users;
      }
    }
  });
};

如何在模板中显示用户？插件在这里:http://plnkr.co/edit/FuXjSwtljQtFYOtFRV18？p = preview

我现在正在尝试在angularjs typeahead上使用一种情况，但它始终无法正常工作，我是否忘记导入一些js文件？请帮帮我，谢谢

HTML：

 <!doctype html>
<html ng-app="search">

<head>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <title>Search</title>
</head>

<body ng-controller="SearchController as search">
        <h4>Static arrays</h4>{{search.states}}
        <pre>Model: {{selected | json}}</pre>
        <input type="text" ng-change="onedit()" ng-model="selected" uib-typeahead="state for state in search.states | filter:$viewValue | limitTo:8">

JS：

 (function () {

    var app = angular.module('search', []);

    app.controller('SearchController', ['$window', '$http', function ($window, $http){                     
        var search = this;
        search.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', …

请建议使用angular js和angular-ui bootstrap实现服务器端分页的不同方法.我将使用ng-repeat根据angualr-ui bootsrap分页指令中选择的当前页面对表格进行分页.因为我们需要避免频繁调用服务器.我们需要一次从服务器获取50个项目.我们每页显示10个项目.由于我们需要对更大的数据集进行分页,因此出于性能原因,我们需要将ng-repeat模型始终包含50个项目.