弹出窗口问题 AngularJS

Question

我有一堆 table 行，其中包括输入和按钮，即。如果值不符合定义的要求，我希望在一行输入的右侧显示一个 Popover。该按钮也将被禁用，直到输入的值正确。

相关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 添加了一个标题，以表明它从 model.After 中看到了正确的值，看到日志显示它应该正常工作，我运行没有想法。

问题是 element.id 没有在触发器内动态更新（它保持其初始值，不像 popover-title 随着模型更新）。是不是我做错了什么？

此外，我只使用 angular 工作了一天，所以如果你们对完成此任务的更好方法有任何建议，我愿意接受建议。

笨蛋：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();
    };
});

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

弹出窗口问题 AngularJS

Issue with Popover AngularJS

tooltip

popover

angularjs

angular-ui