标签冲突中的ui-bootstrap角度过滤器

Question

我在标签集中遇到了过滤器问题。

angular.module('myModule', ['ui.bootstrap']);
angular.module('myModule').controller('ModalController', function($scope) {
$scope.favsLib = [1, 19];
$scope.docsLib = [{
    "id": 19
}, {
    "id": 23
}];
$scope.checkboxDoc = false;
$scope.favFilter = function (docsLib) {
    if ($scope.favsLib.length > 0 && $scope.checkboxDoc == true) {
        if ($.inArray(docsLib.id, $scope.favsLib) < 0) return;
    }

    return docsLib;
}
});
angular.module('myModule').directive('tabDirective', function() {
return {
    scope: {
        display: '='
    },
    controller: "ModalController",
    restrict: 'AE',
    replace: true,
    link: function(scope, elm, attrs) {

    }
};


});

这是我想要的html：

<div ng-app="myModule" ng-controller="ModalController">
  <tabset>
    <tab heading="Documents">
      <tab-directive display="docsLib">  <input type="checkbox" ng-model="checkboxDoc">favourites
    <ul>
        <li ng-repeat="doc in docsLib | filter:favFilter">{{doc}}</li>
    </ul>
   </tab-directive>
    </tab>
    </tabset>
</div>

如果我将输入框放在标签集之外，则过滤器可以正常工作：

Working outside tabset - jsfiddle

点击复选框过滤结果正确。

但是将输入放在选项卡集中不起作用，因此 ui-bootstrap 可能存在问题。

有人有什么想法吗？谢谢。

Answer 1

这不是关于 ui-bootstrap 的问题，而是关于范围的问题。

将复选框放置在标签条内时，checkboxDoc 属性放置在内部范围（由标签条指令创建的范围）。 但是，用于过滤列表的属性位于外部范围（控制器范围）。

快速而肮脏的解决方法是将复选框放在标签条内，但将模型更改为ng-model="$parent.checkboxDoc"。

正确的方法是，不要将原语放在范围内，而是放在对象上。所以不要使用$scope.checkboxDoc = false，而是分配$scope.checkboxDoc = {checked: false);。您可以通过分配<input type="checkbox" ng-model="checkboxDoc.checked"> 正确读取/写入父/外部/控制器范围属性

看到你更正的小提琴：http://jsfiddle.net/xm1q9on9/14/

我曾经在某处读过，ng-model 属性应始终包含至少一个点，例如object.property。这个助记符有助于永远不要将原始属性直接分配给范围对象，并且会修复该问题。在official angular documentation 上阅读有关范围界定的更多信息，或者在angularJS Wiki 上了解更多详细信息。