angularjs - 用于 Bootstrap 弹出窗口的 Angular 指令

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>

谁能帮我解决这个问题？

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

Answer 1

不太确定这是否是您描述的问题，因为在我的 fiddle 中，我必须在关闭弹出窗口后单击按钮两次才能显示弹出窗口。

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

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

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

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>