ui-bootstrap angular 选项卡冲突中的过滤器

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 属性被放置在内部范围（由标签条指令创建的范围）。但是，用于过滤列表的属性位于外部范围（控制器范围）。

Quick 和肮脏的修复方法是将复选框放在选项卡中，但将模型更改为 ng-model="$parent.checkboxDoc"。

正确的方法是，不要将原语放在范围内，而是将对象放在范围内。因此，不要使用 $scope.checkboxDoc = false，而是分配 $scope.checkboxDoc = {checked: false);。您可以通过分配 <input type="checkbox" ng-model="checkboxDoc.checked">

来正确 read/write parent/outer/controller 范围属性

看到你更正了fiddle：http://jsfiddle.net/xm1q9on9/14/

我曾经在某处读到，ng-model 属性应始终至少包含一个点，例如 object.property。这个助记符有助于永远不会将原始属性直接分配给范围对象，并且会修复该问题。在 official angular documentation or for even more details at the angularJS Wiki.

阅读有关范围界定的更多信息

ui-bootstrap angular 选项卡冲突中的过滤器

ui-bootstrap angular filter in tab conflict

filter

angularjs

angular-ui-tabset