Проблема с Popover AngularJS

Question

У меня есть группа строк таблицы, которая включает в себя входы и кнопки, а именно. Я хотел бы иметь дисплей Popover справа от ввода для строки, если значение не соответствует указанным требованиям. Кнопка также будет отключена до тех пор, пока значение входа не будет правильным.

Соответствующие 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; 
    }; 
}); 

Кнопка получает правильно отключить на моем локальном решении. Однако я не могу заставить Поповера работать; он ведет себя так, как будто модель в своем объеме не обновляется. Итак, я просмотрел несколько ссылок здесь (хотя большинство из них были с 2013 года, поэтому я мог бы представить, что это немного изменилось), и их проблемы, казалось, были решены путем удаления примитивной привязки. Это ничего не исправить. Я добавил несколько строк console.log() в функцию, вызываемую из Popover, и она получала правильное значение от модели каждый раз. Я также добавил название Popover, чтобы показать, что он видит правильное значение из модели. После просмотра журнала, показывающего, что он должен работать правильно, у меня закончились идеи.

Проблема: элемент element.id не обновляется динамически внутри триггера (он сохраняет свое начальное значение, в отличие от popover-title, которое обновляется с помощью модели). Что-то я сделал не так?

Кроме того, я работаю только с угловым на один день, поэтому, если у вас есть какие-либо предложения по лучшим способам достижения этого, я открыт для предложений.

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

Благодаря

Answer 1

Найдено решение на 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