Question

我有一堆表行，包括输入和按钮，即。如果值与定义的要求不匹配，我想在行的输入右侧显示一个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添加了一个标题，以显示它从模型中看到正确的值。看到日志显示它应该正常工作后，我已经没有想法了。

问题是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

Popover AngularJS的问题

1 个答案: