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>

Если я возьму поле ввода за пределами tabset, фильтр будет работать нормально:

Работа вне вкладки - jsfiddle

щелчок на флажке фильтрует результаты правильно.

Но размещение ввода внутри вкладки не работает, поэтому может возникнуть проблема с загрузчиком пользовательского интерфейса.

У кого-нибудь есть идеи? Благодарю.

Answer 1

Дело не в UI-Bootstrap, а в том, что касается определения области действия.

При установке флажка внутри вкладки, свойство 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, Эта мнемоника помогает никогда не назначать примитивные свойства непосредственно объекту области действия и исправила бы эту проблему. Узнайте больше о области видимости в официальной документации angular или для более подробной информации в angularJS Wiki.