标签: angular-ui-bootstrap

我正在使用Angular UI Bootstrap popover(http://angular-ui.github.io/bootstrap/#/popover),并且希望指定一个回调函数在打开时执行,另一个函数在它关闭时执行.我的用例是我使用popover来包含数据网格的过滤器.我想在打开时加载一些远程过滤选项,仅在关闭弹出窗口时应用选定的过滤器.

该文档似乎只支持一些基本选项,但没有指示回调支持.我在源代码中也没有看到任何内容.我唯一的选择是设置一个间隔函数来定期检查弹出窗口是否在DOM中可见？

我也在考虑Angular Strap的popover来实现相同的结果,但似乎无法找到在那里设置回调的选项.

(我是AngularJS的新手)

我想创建一个指令,当用户单击放置指令的元素时触发Bootstrap Popover.要弹出窗口将在我的指令中生成HTML内容,并且此HTML中的元素将具有ng-click指令.

我只是"简单的jQuery"

element.popover({
  content: myGeneratedContent
})
.popover('show');

// some code to attach events to the content

但我无法弄清楚如何使用Angular UI实现这一目标.任何线索？

谢谢

-

我想要做的是https://github.com/mistic100/Angular-Smilies的按钮,它显示所有可用的表情符号,点击后,将相应的短代码添加到绑定模型中.

如何在AngularJS/Bootstrap工具提示中添加自定义展示位置/动画？我可以:

myApp.controller('TooltipCtrl', function ($scope) {
  $scope.htmlTooltip = 'Here is a tooltip!';
});

它完美无缺,但如果我添加:

$scope.setTriggers({
  placement: 'right'
});

在控制器内部,我得到一个"未定义不是函数"错误.我在语法上做错了什么？

编辑:

我也试过这样做:

myApp.controller('TooltipCtrl', function ($scope) {
  $scope.placement = 'right';
  $scope.htmlTooltip = 'Here is a tooltip!';
});

但它似乎对工具提示上的位置没有影响.

如何在bootstrap分页中更改nextpage和previouspage的标签？例如在这个样本中我怎么写pushNext而不是nextpage？

我添加ui-bootstrap-tpls-0.12.0.js到我的项目和我们的手风琴,现在我想使用分页但我得到这个错误

ngModelCtrl.$render is not a function

这是我的代码

<div ng-controller="paginationCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" on-select-page="pageChanged(page)"></pagination>    

</div>

我添加ui.bootstrap

angular.module("boors", ['ui.router','ui.bootstrap','angularUtils.directives.uiBreadcrumbs','ngAnimate','truncate']);

在我的脚本标签中我有

<script src="<?=$this->assetsBase?>/js/lib/ui-bootstrap-tpls-0.12.0.js"></script>

手风琴工作正常,但分页不起作用

我正在使用angular-ui bootstrap datepicker组件.在我有两个日期字段的一个视图上,日期选择器打开,关闭后,单击时再次打开.

在另一个页面上,一旦打开和关闭,日期选择器不再打开.

当然我在这里遗漏了一些东西,但是我放弃了几个小时试图找到它.

你能帮我吗 ？

datepicker的HTML部分如下所示:

<div class="input-group">
                        <input type="text" class="input-sm-7" datepicker-popup="dd/MM/yyyy" is-open="opened"
                               datepicker-options="dateOptions" ng-model="singleDate"
                               close-text="Close" />
                        <button type="button" class="btn btn-default" ng-click="open($event)"><i
                                class="fa fa-calendar"></i>
                        </button>
                    </div>

控制器中的JS代码如下所示:

            $scope.dateOptions = {
            formatYear: 'yy',
            startingDay: 1
        };

        $scope.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();

            $scope.opened = true;
        };

使用Bootstrap,Angular和ui-bootstrap我正在创建一组看起来像普通按钮的单选按钮(在这里使用plunker).

我现在想要将活动按钮设为蓝色(.btn-primary),其余为白色(btn-default).我找到了一些解答如何在这里有条件地应用课程的答案.我尝试像这样实现这种技术(Plunker在这里):

<div class="btn-group">
    <label class="btn" ng-class="{btn-primary: radioModel=='Left', btn-default: radioModel!='Left'}" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn" ng-class="{btn-primary: radioModel=='Middle', btn-default: radioModel!='Middle'}"ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn" ng-class="{btn-primary: radioModel=='Right', btn-default: radioModel!='Right'}"ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

不幸的是它似乎不起作用.有谁知道如何实现活动按钮成为一个btn-primary和其他人是一个btn-default？欢迎所有提示!

我有一个bootstrap模式弹出窗口,我用我的modalcontroller填充数据.在我填写数据后,我想展示它.为了能够在进入页面时立即显示modalpopup,我想直接触发它.现在我有一个按钮可以做到这一点,但我怎么能以适当的方式自动完成呢？

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" ng-init="getAllItems()">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <div class="">
                    <form class="form-horizontal" name="form" role="form">
                        <div ng-repeat="item in items">
                            <input type="radio" name="fundselector" ng-model="item" ng-value="item"/> {{item}} <br />
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

我的控制器:

angular.module("Modal") …

我有一个带disabledDates功能的AngularUI Bootstrap日历

<uib-datepicker ng-model="date" ng-change="change()"  date-disabled="disabledDates(date,mode)"></uib-datepicker>

这是功能:

 $scope.disabledDates = function (date, mode) {
                if ($scope.daysAvailable != null) {
                    return mode === 'day' && $scope.daysAvailable.indexOf(date.getDay() + 1) == -1;
                }
            }

$scope.daysAvailable是从服务器加载$http请求

 $scope.init = function () {
    return $http.get('/OrderEntry/GetAvailableDays', { params: { method: shipMethod, state: state, zip: zip } }).then(function (data) {
        $scope.daysAvailable  data.data;
    });
}

问题是我的HTML正在加载(并disabledDates()在结果从服务器返回并加载到控制器之前调用init()

如何在返回数据之前阻止日历加载？

我正在研究一些Bootstrap-UI选项卡,但我无法在templateURL不操纵页面URL的情况下找到在线实例.这是我想做的事情:

HTML

<uib-tabset active="active">
    <uib-tab ng-repeat="tab in model.tabs" index="$index" heading="{{tab.title}}">
        {{tab.content}}
    </uib-tab>
</uib-tabset>

JS

model.jo = {...} // a gigantic JSON object - needs to be available in the templates.
model.tabs = [
    {
        title: "Visualized",
        content: url('vis.html')
    },
    {
        title: "Pure JSON",
        content: url('json.html')
    }
]

我在网上发现的大部分内容都使用$routeProvider和修改$locationProvider网址以显示不同的标签,例如:http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/.我不想那样做.

有没有办法定义templateUrl你为组件做的事情？

另外,我需要我的JSON对象model.jo,在html页面中.