Question

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

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并再次调用它，并且指令不再起作用。在标记弹出窗口中：

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

任何人都可以帮我吗？

更新：看起来所有绑定（scope.saveCurrency，在所选属性上观看）在弹出窗口隐藏后停止工作。

Answer 1

不确定这是否是您所描述的问题，因为在我的小提琴中，我必须在按钮上单击两次以在关闭弹出窗口后显示弹出窗口。

我不知道问题是什么，但使用trigger: 'manual'并绑定到点击事件，它正在按预期工作。

请查看下面的演示或此jsfiddle。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这里有无耻的自我推销，但您可能需要查看Angualr UI Bootstrap库，因为我们已经为您完成了此操作。即使您不想使用它，也可以获取所需的代码......

引导程序弹出窗口的Angular指令

2 个答案: