Bootstrap Popover的Angular指令 [英] Angular directive for bootstrap popover

查看:72
本文介绍了Bootstrap Popover的Angular指令的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我为引导弹出窗口编写了自定义指令,但遇到了一些麻烦. 这是代码:

I write my custom directive for bootstrap popover, but face some trouble. This is the code:

angular.module('CommandCenterApp')
.directive('bzPopover', function($compile,$http, $commandHelper) {
    return{
        restrict: "A",
        replace: false,
        scope: {
            currencies:"=data",
            selected:"=selected"
        },
        link: function (scope, element, attrs) {
            var html = '<div class="currency-popup">' +
                '<span class="select-label">Select currency:</span>'+
                '<select class="custom-select" ng-model="selected" ng-options="currency.CurrencyName for currency in currencies track by currency.CurrencyId">' +

                '</select>' +
                '<button class="btn btn-green" ng-click="saveCurrency()">Save</button>'+
                '</div>';
            var compiled = $compile(html)(scope);
            $(element).popover({
                content:compiled,
                html: true,
                placement:'bottom'
            });
            scope.saveCurrency = function () {
                var obj = {
                    Currency:scope.selected,
                    venueId: $commandHelper.getVenueId()
                }
                $http.post("/api/currencyapi/changecurrency", obj).success(function() {
                    scope.$emit('currencySaved', scope.selected);
                });
                //$(element).popover('hide');
            }
            scope.$watch('selected', function() {
                console.log(scope.selected);
            });
        }
    }

});

当我第一次调用popover时,一切正常,我单击按钮,它触发scope.saveChanges函数.然后,我关闭popover并再次调用它,指令不再起作用. 在标记弹出窗口中显示为:

When I first time invoke popover all works fine, I click on button and it trigger scope.saveChanges function. Then I close popover and invoke it again, and directive doesnt work anymore. In markup popover present as:

<a bz-popover data="controller.currencies" selected="controller.selectedCurrency" class="change-currency hidden-xs hidden-sm" href>Change currency</a>

有人可以帮我吗?

更新:在弹出窗口隐藏之后,所有绑定(scope.saveCurrency,在选定属性上监视)似乎都停止工作.

UPDATE: it looks like all bindings(scope.saveCurrency,watched on selected property) stop working after popover hidding.

推荐答案

不是很确定这是否是您要描述的问题,因为在我的小提琴中,我必须单击两次按钮才能在关闭弹出窗口后显示弹出窗口.

Not really sure if this is the problem you're describing because in my fiddle I had to click twice on the button to show the popover after closing the popover.

我不知道出了什么问题,但使用trigger: 'manual'并绑定到click事件,它可以按预期工作.

I don't know what's the problem but with trigger: 'manual' and binding to click event it is working as expected.

请查看下面或此 jsfiddle 中的演示.

Please have a look at the demo below or in this jsfiddle.

我已经注释了您的一些代码,因为它不需要显示弹出窗口行为,而且ajax调用在演示中也不起作用.

I've commented some of your code because it's not needed to show the popover behaviour and also the ajax call is not working in the demo.

angular.module('CommandCenterApp', [])
.controller('MainController', function() {
    this.currencies = [{
        CurrencyId: 1,
        CurrencyName: 'Dollar'},{
          CurrencyId: 2,
        CurrencyName: 'Euro'}];
})
.directive('bzPopover', function($compile,$http) { //, $commandHelper) {
    return{
        restrict: "A",
        replace: false,
        scope: {
            currencies:"=data",
            selected:"=selected"
        },
        link: function (scope, element, attrs) {
            var html = '<div class="currency-popup">' +
                '<span class="select-label">Select currency:</span>'+
                '<select class="custom-select" ng-model="selected" ng-options="currency.CurrencyName for currency in currencies track by currency.CurrencyId">' +

                '</select>' +
                '<button class="btn btn-green" ng-click="saveCurrency()">Save</button>'+
                '</div>';
            var compiled = $compile(html)(scope);
            $(element).popover({
                content:compiled,
                html: true,
                placement:'bottom',
                trigger: 'manual'
            });
            $(element).bind('click', function() {
            	$(element).popover('toggle');
            });
            
            scope.saveCurrency = function () {
                var obj = {
                    Currency:scope.selected,
                    venueId: 1//$commandHelper.getVenueId()
                }
                $http.post("/api/currencyapi/changecurrency", obj).success(function() {
                    scope.$emit('currencySaved', scope.selected);
                });
                $(element).popover('hide');
            }
            scope.$watch('selected', function() {
                console.log(scope.selected);
            });
        }
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div ng-app="CommandCenterApp" ng-controller="MainController as controller">
<button bz-popover data="controller.currencies" selected="controller.selectedCurrency" class="change-currency hidden-xs hidden-sm">Change currency</button>
</div>

这篇关于Bootstrap Popover的Angular指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆