引導彈出窗口的角度指令

我爲自舉彈出窗口寫入了自定義指令，但遇到了一些麻煩。這是代碼：引導彈出窗口的角度指令

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

});

當我第一次調用酥料餅的一切工作正常，我點擊按鈕，它觸發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，在選定的屬性上觀看）在popover hidding後停止工作。

來源

2015-09-29 Ihor Korotenko

請在Plunker中重新創建你的指令的工作場景。這有助於更快地找到解決方案。 –

嘗試明確定義一個'觸發器：'點擊''或將值改爲''焦點''或其他東西，看看它是否做了什麼。 'trigger'是一個像'replace'，'restrict'和'link'一樣返回的屬性。但如果不能在plnkr或jsfiddle中重現問題，就很難找出問題所在。 – UltraSonja

不確定這是否是您描述的問題，因爲在我的小提琴中，我必須在按鈕上單擊兩次以在關閉彈出窗口後顯示彈出窗口。

我不知道什麼問題，但與trigger: 'manual'和綁定到單擊事件它按預期工作。

請看下面的演示或在這jsfiddle。

我已經評論了一些代碼，因爲它不需要顯示popover行爲，並且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() { 
 
      \t $(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>

來源

2015-09-29 20:33:06 AWolf

謝謝，它看起來像在你的例子中工作正常。我會明天嘗試，如果一切都會好的，請檢查答案。 –

嗨，我嘗試根據你的答案修改代碼，但行爲是一樣的。我真的不明白爲什麼它不工作 –

無恥的自我推銷在這裏，但你可能要在Angualr UI Bootstrap庫，因爲我們已經完成了這個給你看看。即使你不想使用它，你也可以獲得你需要的代碼...

來源

2015-10-01 18:36:26 icfantv

這不是一個自我推銷，我只是不知道Angular UI Bootstrap庫，所以我試圖做我自己的。 –

引導彈出窗口的角度指令

回答

相關問題