Popover的問題AngularJS

我有一堆包含輸入和按鈕的錶行，即。如果該值與所定義的要求不匹配，我希望在行的輸入右側有一個Popover顯示。該按鈕也將被禁用，直到輸入值正確。Popover的問題AngularJS

相關HTML：

<div class="row col-md-4"> 
    <table ng-controller="TestController" style="width: 100%"> 
     <tr ng-repeat="element in model.InvoiceNumbers"> 
      <td><input ng-model="element.id" 
        popover="Invoice must match ##-####!" 
        popover-placement="right" 
        popover-trigger="{{ { false: 'manual', true: 'blur'}[!isValidInvoice(element.id)] }}" 
        popover-title="{{element.id}}"/></td> 
      <td>{{element.id}}</td> 
      <td><button ng-disabled="!isValidInvoice(element.id)">Approve</button></td> 
     </tr> 
    </table> 
</div>

相關的JavaScript：

app.controller("TestController", function ($scope) { 
    $scope.model = { 
     InvoiceNumbers : [ 
      { id: '12-1234' }, 
      { id: '12-1235' }, 
      { id: '1234567' }, 
      { id: '1' }, 
      { id: '' }], 
    }; 

    $scope.isValidInvoice = function (invoice) { 
     if (invoice == null) return false; 
     if (invoice.length != 7) return false; 
     if (invoice.search('[0-9]{2}-[0-9]{4}') == -1) return false; 
     return true; 
    }; 
});

按鈕大幹快上我的本地解決方案正確禁用。但是，我無法讓Popover工作。它的行爲就好像其範圍內的模型沒有得到更新。所以，我在這裏查看了幾個鏈接（儘管大多數都是從2013年開始的，所以我想可能會有一些變化），並且他們的問題似乎可以通過移除原始綁定來解決。這並沒有解決任何問題。我在從Popover調用的函數中添加了一些console.log（）行，並且每次都從模型中獲取正確的值。我還爲Popover添加了一個標題，以表明它從模型中看到了正確的價值。在看到日誌顯示它應該正常工作後，我已經用完了想法。

問題是element.id沒有在觸發器內動態更新（它保持它的初始值，不像popover-title更新模型）。有什麼我做錯了嗎？

另外，我一直只與角一天工作，所以如果你們都有更好的方法來完成這一任何建議，我願意提供建議。

Plunker：http://plnkr.co/edit/tiooSxSDgzXhbmIty3Kc?p=preview

感謝

來源

2015-02-09 sawprogramming

發現了angular-ui github page一個解決方案，包括增加這些指令：

.directive('popPopup', function() { 
    return { 
    restrict: 'EA', 
    replace: true, 
    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, 
    templateUrl: 'template/popover/popover.html' 
    }; 
}) 

.directive('pop', function($tooltip, $timeout) { 
    var tooltip = $tooltip('pop', 'pop', 'event'); 
    var compile = angular.copy(tooltip.compile); 
    tooltip.compile = function (element, attrs) { 
     var parentCompile = compile(element, attrs); 
     return function(scope, element, attrs) { 
     var first = true; 
     attrs.$observe('popShow', function (val) { 
      if (JSON.parse(!first || val || false)) { 
      $timeout(function() { 
       element.triggerHandler('event'); 
      }); 
      } 
      first = false; 
     }); 
     parentCompile(scope, element, attrs); 
     } 
    }; 
    return tooltip; 
});

，這裏是我的控制器所做的更改，以使其工作像我想在原來的問題：

<div class="row col-md-4"> 
    <table ng-controller="TestController" style="width: 100%"> 
     <tr ng-repeat="element in model.InvoiceNumbers"> 
      <td><input ng-model="element.id" 
       pop="Invoice must match ##-####!" 
       pop-placement="right" 
       pop-show="{{element.showPop}}" 
       ng-blur="isValidInvoice($index, $event)" /></td> 
      <td>{{element.id}}</td> 
      <td><button ng-disabled="!isValidInvoice($index)">Approve</button></td> 
     </tr> 
    </table> 
</div>

的JavaScript：

app.controller("TestController", function ($scope) { 
    $scope.model = { 
     InvoiceNumbers: [ 
      { id: '12-1234', showPop: false }, 
      { id: '12-1235', showPop: false }, 
      { id: '1234567', showPop: false }, 
      { id: '1', showPop: false }, 
      { id: '', showPop: false }] 
    }; 

    $scope.isValidInvoice = function ($index, $event) { 
     var obj = $scope.model.InvoiceNumbers[$index]; 

     var isValid = function() { 
      if (obj.id === null) return false; 
      if (obj.id.length != 7) return false; 
      if (obj.id.search('[0-9]{2}-[0-9]{4}') == -1) return false; 
      return true; 
     }; 

     if ($event != null && $event.type == "blur") obj.showPop = !isValid(); 
     return isValid(); 
    }; 
});

Plunker：http://plnkr.co/edit/5m6LHbapxp5jqk8jANR2?p=preview

來源

2015-02-12 20:29:22 sawprogramming

Popover的問題AngularJS

回答

相關問題