Popover的问题AngularJS

我有一堆包含输入和按钮的表行，即。如果该值与所定义的要求不匹配，我希望在行的输入右侧有一个Popover显示。该按钮也将被禁用，直到输入值正确。Popover的问题AngularJS

相关的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

回答

相关问题