UI的引导选项卡中的冲突角度过滤器 [英] ui-bootstrap angular filter in tab conflict

问题描述

我有一个过滤器的问题，当一个标签集内。

I have an issue with a filter when inside a tabset.

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：

here is the html I would like:

<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>

如果我把输入框的标签集外的过滤器正常工作：

If I take the the input box outside of the tabset the filter works fine:

工作外标签集 - 的jsfiddle

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

clicking on checkbox filters results correctly.

但放置输入标签集内不工作，所以有可能与UI，引导的问题。

But placing the input inside the tabset doesn't work, so there maybe an issue with the ui-bootstrap.

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

Has anyone any ideas? Thanks.

推荐答案

有没有关于UI的引导问题，而是作用域。

It is no issue about ui-bootstrap, but about scoping.

在放置复选框标签栏里面，的 checkboxDoc 的财产被放置在内部范围（由标签栏指令创建的范围）。
但是用于放置在外部范围（控制器范围）过滤列表中的属性。

When placing the checkbox inside the tabstrip, the checkboxDoc property is placed at the inner scope (the scope created by the tabstrip directive). However the property used for filtering your list in placed at the outer scope (the controller scope).

快速和肮脏的解决将是把标签栏里面的复选框，但改变模式 NG-模式=$ parent.checkboxDoc。

Quick and dirty fix would be to place the checkbox inside the tabstrip, but change the model to ng-model="$parent.checkboxDoc".

正确的方法是，不要把原始的范围，但一个对象。因此，而不是使用 $ scope.checkboxDoc = FALSE ，分配 $ scope.checkboxDoc = {检查：假）; 。在你可以正确读取/通过指定＆LT写的父/外/控制器范围内的财产;输入类型=复选框NG模型=checkboxDoc.checked＆GT;

The proper way is, to not put a primitive at the scope but an object. So instead of using $scope.checkboxDoc = false, assign $scope.checkboxDoc = {checked: false);. The you can properly read/write the parent/outer/controller scope property by assigning <input type="checkbox" ng-model="checkboxDoc.checked">

看你纠正小提琴： http://jsfiddle.net/xm1q9on9/14/

某处我曾经读过，那 NG-模型属性应始终包含至少一个点，就像 object.property 。这有助于记忆永远不会直接分配基本属性的范围对象，将有固定的probpem。了解更多关于在href=\"https://docs.angularjs.org/guide/scope\" rel=\"nofollow\">在的或更详细信息， angularJS维基。

Somewhere i once read, that the ng-model attribute should always contain at least one dot, like object.property. This mnemonic helps to never assign primitive properties to the scope object directly and would have fixed that probpem. Read more about scoping at the official angular documentation or for even more details at the angularJS Wiki.

这篇关于UI的引导选项卡中的冲突角度过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！