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

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

但是将输入放在tabset中是行不通的，因此ui-bootstrap可能存在问题。

有没有人有任何想法？感谢。

Answer 1

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

将复选框放在tabstrip中时， checkboxDoc 属性放在内部作用域（由tabstrip指令创建的作用域）。但是，用于过滤列表的属性位于外部作用域（控制器作用域）。

快速而肮脏的修复方法是将复选框放在标签条中，但将模型更改为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了解更多详情。

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

1 个答案: