用于引导弹出窗口的 Angular 指令 [英] Angular directive for bootstrap popover

问题描述

我为 bootstrap popover 编写了自定义指令，但遇到了一些麻烦.这是代码:

angular.module('CommandCenterApp').directive('bzPopover', function($compile,$http, $commandHelper) {返回{限制:A"，替换:假，范围: {货币:=数据"，选中:"=选中"},链接:函数(范围、元素、属性){var html = '<div class="currency-popup">'+'<span class="select-label">选择货币:</span>'+'<select class="custom-select" ng-model="selected" ng-options="currency.CurrencyName 用于按currency.CurrencyId 跟踪的货币中的货币">'+''+'<button class="btn btn-green" ng-click="saveCurrency()">保存</button>'+'</div>';var 编译 = $compile(html)(scope);$(元素).popover({内容:编译，html:对，位置:'底部'});scope.saveCurrency = 函数 () {变量对象 = {货币:scope.selected,场地 ID:$commandHelper.getVenueId()}$http.post("/api/currencyapi/changecurrency", obj).success(function() {scope.$emit('currencySaved', scope.selected);});//$(element).popover('隐藏');}scope.$watch('selected', function() {控制台日志(范围.选择)；});}}});

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

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

谁能帮我解决这个问题?

UPDATE:看起来所有绑定(scope.saveCurrency，在选定的属性上观看)在弹出窗口隐藏后停止工作.

解决方案

不太确定这是否是您描述的问题，因为在我的小提琴中，我不得不在关闭弹出框后单击按钮两次才能显示弹出框.

我不知道有什么问题，但使用 trigger: 'manual' 和绑定到 click 事件，它按预期工作.

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

我对您的一些代码进行了评论，因为不需要显示弹出窗口行为，而且演示中的 ajax 调用也不起作用.

angular.module('CommandCenterApp', []).controller('MainController', function() {this.currencies = [{货币 ID:1，货币名称:'美元'},{货币 ID:2，货币名称:'欧元'}];}).directive('bzPopover', function($compile,$http) {//, $commandHelper) {返回{限制:A"，替换:假，范围: {货币:=数据"，选中:"=选中"},链接:函数(范围、元素、属性){var html = '<div class="currency-popup">'+'<span class="select-label">选择货币:</span>'+'<select class="custom-select" ng-model="selected" ng-options="currency.CurrencyName 用于按currency.CurrencyId 跟踪的货币中的货币">'+''+'<button class="btn btn-green" ng-click="saveCurrency()">保存</button>'+'</div>';var 编译 = $compile(html)(scope);$(元素).popover({内容:编译，html:对，位置:'底部'，触发器:'手动'});$(element).bind('click', function() {$(element).popover('toggle');});scope.saveCurrency = 函数 () {变量对象 = {货币:scope.selected,venueId: 1//$commandHelper.getVenueId()}$http.post("/api/currencyapi/changecurrency", obj).success(function() {scope.$emit('currencySaved', scope.selected);});$(element).popover('隐藏');}scope.$watch('selected', function() {控制台日志(范围.选择)；});}}});

<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 作为控制器"><button bz-popover data="controller.currencies" selected="controller.selectedCurrency" class="change-currency hidden-xs hidden-sm">更改货币</button>

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

});

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>

Can anyone help me with this?

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.

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

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

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>

这篇关于用于引导弹出窗口的 Angular 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！