Javascript ng重复作用域的奇怪行为

我有一段HTML：

<div ng-switch="view">
    <div ng-switch-when="products">
        <input class="form-control" placeholder="Search" ng-model="searchText" />
        <ul ng-show="products && products.length > 0">
            <li class="head">
                <div class="column col-select"><input type="checkbox" ng-model="$parent.allSelected" ng-change="$parent.selectAll($parent.allSelected)" /></div>
                <div class="column col-name">Name</div>
                <div class="column col-code">Code</div>
                <div class="column col-stock">Stock</div>
                <div class="column col-code">Price</div>
                <div class="column col-buttons"></div>
            </li>
            <li ng-repeat="p in ($parent.shownProducts = (products | filter: searchText))">
                <div class="column col-select"><input type="checkbox" ng-model="p.selected" ng-change="select(p.selected)" /></div>
                <div class="column col-name">{{ p.name }}</div>
                <div class="column col-code">{{ p.code }}</div>
                <div class="column col-stock">{{ p.stock }}</div>
                <div class="column col-code">{{ p.price | currency: '$' : 2 }}</div>
                <div class="column col-buttons">
                    <button class="btn btn-edit" ng-click="goTo('edit', $index)"><i class="fa fa-pencil"></i></button>
                    <button class="btn btn-delete" ng-click="goTo('delete', $index)"><i class="fa fa-trash"></i></button>
                </div>
            </li>
        </ul>
    </div>
</div>

这段代码可以工作，但是：

• 标头（li.head）必须使用$parent scope才能访问$scope服务 否则，即使设置了初始值，模型也不会更新 没错
• Ng repeat作用域不使用$parent，但可以正常工作

对我来说，这看起来不一致。我知道ng repeat创建了一个子作用域，但为什么它不需要$parent呢？为什么$parent是必需的，尽管它超出了ng repeat的定义

更新：

我发布的代码是ng switch的一部分，所以我也把它放了进去。shownProducts是一个数组，包含按搜索文本筛选的项目。我将该控件添加到HTML中。我还向$scope添加了一系列产品。

演示-

JS：

$scope.select = function (value) {
    if (!value) {
        $scope.allSelected = value;
        return;
    }

    var selCount = 0;
    for (var i in $scope.shownProducts) {
        if ($scope.shownProducts[i].selected) selCount++;
    }

    if (selCount == $scope.shownProducts.length) $scope.allSelected = true;
  };

  $scope.selectAll = function (value) {
      for (var i in $scope.shownProducts) {
          $scope.shownProducts[i].selected = value;
      }
  };

  $scope.products = [{"name":1, "code":"001","stock":"abc","price":500},{"name":2, "code":"002","stock":"xyz","price":1000}];
  $scope.shownProducts = $scope.products;

HTML：

$scope.select = function (value) {
    if (!value) {
        $scope.allSelected = value;
        return;
    }

    var selCount = 0;
    for (var i in $scope.shownProducts) {
        if ($scope.shownProducts[i].selected) selCount++;
    }

    if (selCount == $scope.shownProducts.length) $scope.allSelected = true;
  };

  $scope.selectAll = function (value) {
      for (var i in $scope.shownProducts) {
          $scope.shownProducts[i].selected = value;
      }
  };

  $scope.products = [{"name":1, "code":"001","stock":"abc","price":500},{"name":2, "code":"002","stock":"xyz","price":1000}];
  $scope.shownProducts = $scope.products;

无需使用

$parent

。移除它，一切正常

<ul ng-show="products && products.length > 0">
  <li class="head">
      <div class="column col-select"><input type="checkbox" ng-model="allSelected" ng-change="selectAll(allSelected)" /></div>
      <div class="column col-name">Name</div>
      <div class="column col-code">Code</div>
      <div class="column col-stock">Stock</div>
      <div class="column col-code">Price</div>
      <div class="column col-buttons"></div>
  </li>
  <li ng-repeat="p in shownProducts = (products | filter: searchText)">
      <div class="column col-select"><input type="checkbox" ng-model="p.selected" ng-change="select(p.selected)" /></div>
      <div class="column col-name">{{ p.name }}</div>
      <div class="column col-code">{{ p.code }}</div>
      <div class="column col-stock">{{ p.stock }}</div>
      <div class="column col-code">{{ p.price | currency: '$' : 2 }}</div>
      <div class="column col-buttons">
          <button class="btn btn-edit" ng-click="goTo('edit', $index)"><i class="fa fa-pencil"></i></button>
          <button class="btn btn-delete" ng-click="goTo('delete', $index)"><i class="fa fa-trash"></i></button>
      </div>
  </li>
</ul>

名称
代码
股票
价格


{{p.name}}
{{p.code}}
{{p.stock}
{{p.price}货币：'$'：2}

问题是ng开关创建了一个新的作用域，因此我必须使用$parent来访问声明所有内容的父作用域

---

至少添加一些解释，说明您的代码是如何解决OP的问题的。谢谢，但我刚刚意识到问题在于ng开关，我最初没有指定它。我发布了最新消息。