Popover AngularJS 的问题

Question

我有一堆表格行，其中包括输入和按钮。如果值与定义的要求不匹配，我希望在一行的输入右侧显示一个弹出框。在输入的值正确之前，该按钮也将被禁用。

相关 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 随模型更新）。是不是我做错了什么？

另外，我只使用了 Angular 一天，所以如果你们对更好的方法有任何建议，我愿意接受建议。

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