AngularJS ui-bootstrap手风琴无法在过滤的ng-repeat中访问外部手风琴的变量

Question

我使用的是AngularJS UI Bootstrap手风琴。我在手风琴里面使用ng-repeat过滤器。现在的问题是我无法访问<accordion>之外的过滤变量。如果我抛弃手风琴并使用简单的HTML，它可以正常工作。

<div ng-app="myApp">
  <div ng-controller="AccordionCtrl">
    <div>outside accordion{{filteredCampaigns}}</div>
    <input type="text" ng-model="q" placeholder="filter" />
    <accordion class="accordion" close-others="true">
      <div>inside accordion{{filteredCampaigns}}</div>
      <accordion-group  ng-repeat="campaign in filteredCampaigns=(campaigns | filter:q)">
        <accordion-heading>
          <h3>{{campaign.title}}</h3>
        </accordion-heading>
        <p>{{campaign.content}}</p>
      </accordion-group>
    </accordion>
  </div>
</div>
<script>
  var app = angular.module('myApp', ['ui.bootstrap']);
  app.controller('AccordionCtrl', ['$scope',
  function ($scope) {
      $scope.campaigns = [{
          title: "Test1",
          content: "file1.html"
      }, {
          title: "Test2",
          content: "file2.html"
      }, {
          title: "Test3",
          content: "file3.html"
      }];
  }]);
</script>

我还创建了小提琴here

Answer 1

这是因为angular-ui附带的子指令具有的子范围不会将这个新的filteredCampaigns变量反映到控制器的范围。

第一个选项 - Hack it，

1）定义一个对象以包含filteredCampaigns动态变量

$scope.context = {};   

2）将您的accordion-group更改为：

<accordion-group ng-repeat="campaign in context.filteredCampaigns=(campaigns | filter:q)">

http://jsfiddle.net/Lryuvm9m/1/

<script>
    var app = angular.module('myApp', ['ui.bootstrap']);
    app.controller('AccordionCtrl', ['$scope',
    function ($scope) {

        $scope.context = {};
        $scope.campaigns = [{
            title: "Test1",
            content: "file1.html"
        }, {
            title: "Test2",
            content: "file2.html"
        }, {
            title: "Test3",
            content: "file3.html"
        }];
    }]);
</script>

<div ng-app="myApp">
    <div ng-controller="AccordionCtrl">
        <div>outside accordion {{context.filteredCampaigns}} </div>
        <input type="text" ng-model="q" placeholder="filter" />      
        <accordion class="accordion" close-others="true">
            <div>inside accordion{{context.filteredCampaigns}}</div>
            <accordion-group  ng-repeat="campaign in context.filteredCampaigns=(campaigns | filter:q)">
                <accordion-heading>
                    <h3>{{campaign.title}}</h3>
                </accordion-heading>
                <p>{{campaign.content}}</p>
            </accordion-group>
        </accordion>
    </div>
</div>

第二个选项 - 使用Controller as，

我建议使用Controller as，因为它可以让您更好地控制在控制器范围内定义的内容以及

的内容

http://jsfiddle.net/gntt6h5b/

<script>
    var app = angular.module('myApp', ['ui.bootstrap']);
    app.controller('AccordionCtrl', ['$scope',
    function () {
        var vm = this;
        vm.campaigns = [{
            title: "Test1",
            content: "file1.html"
        }, {
            title: "Test2",
            content: "file2.html"
        }, {
            title: "Test3",
            content: "file3.html"
        }];
    }]);
</script>

<div ng-app="myApp">
    <div ng-controller="AccordionCtrl as vm">
        <div>outside accordion {{vm.filteredCampaigns}} </div>
        <input type="text" ng-model="q" placeholder="filter" />      
        <accordion class="accordion" close-others="true">
            <div>inside accordion{{vm.filteredCampaigns}}</div>
            <accordion-group  ng-repeat="campaign in vm.filteredCampaigns=(vm.campaigns | filter:q)">
                <accordion-heading>
                    <h3>{{campaign.title}}</h3>
                </accordion-heading>
                <p>{{campaign.content}}</p>
            </accordion-group>
        </accordion>
    </div>
</div>

Answer 2

<accordion>创建一个独立的范围，filteredCampaigns仅在该范围内可用，而不在父范围内。要将其添加到父作用域，请使用$parent：

ng-repeat="campaign in $parent.filteredCampaigns=(campaigns | filter:q)">

另一个解决方案是创建一个对象，在父作用域中创建一个对象，其中包含filteredCampaings的参数：

// AccordionCtrl
$scope.filteredValues = {
    filteredCampaings: []
};

ng-repeat="campaign in filteredValues.filteredCampaigns=(campaigns | filter:q)"

Answer 3

由于您在ng-repeat之外使用它，因此ng-repeat无法创建自己的范围，因此您无法看到该变量。

您可以使用控制器并手动使用过滤器来检索过滤的对象：

$scope.getFilteredCampaings = function () {
        $scope.filteredCampaigns = $filter('filter')($scope.campaigns, $scope.q);
        return $scope.filteredCampaigns;
}

Fiddle