Question

如果我在指令中使用ngRepeat，它将创建隔离范围。看这个例子：

<ul>
  <li ng-repeat="item in model.items"></li>
</ul>

想象一下model.items数组有3个项目。

这将创建3个范围并将它们绑定到3个li元素。每个li元素在其隔离范围内都有自己的item对象/值。我无法访问此item值，因为li范围是隔离的。

如何在不创建自定义指令且没有ngRepeat的情况下创建相同的行为？

Answer 1

我想你可能会有些困惑，但让我试着清理一下......

首先，ngRepeat是一个指令，因此你不能真正使用它作为没有指令的隔离范围的例子！ https://docs.angularjs.org/api/ng/directive/ngRepeat

其次，ngRepeat没有创建隔离范围。您无法访问item的原因是因为它为每个迭代项创建子范围。你不能（有些方法，但只是说不能为了你自己的理智）访问数据parent-＆gt;子范围，那就是你的问题。

如果您想手动创建隔离范围，可以在控制器$scope.$new(true)中执行以下操作，但实际上有一些特定的原因，并且它不太可能是您要实现的目标所必需的。

在此处阅读更多相关信息： https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$新

看看这个只是为了探索一些范围隔离场景： https://jsfiddle.net/r0m4n/6bjhcvq5/

Answer 2

您可以通过指定ng-controller：

来隔离元素的范围

<div ng-controller="MyController">{{ HelloWorld }}</div>

app.controller('MyController', function($scope) {
    $scope.HelloWorld = "Hello, World!";
});

Answer 3

这就是如何使用嵌套div和ng-controller创建隔离范围：

<div ng-controller="firstControllerScope">
    <h3>First controller</h3>
    <strong>First name:</strong> {{firstName}}<br />

    <div ng-controller="secondControllerScope">
      <h3>Second controller (inside First)</h3>
      <strong>First name (from First):</strong> {{firstName}}<br />
      <strong>Last name (new variable):</strong> {{lastName}}<br />
    </div>
</div>

控制器中的

var firstControllerScope = function ($scope)
{
  // Initialize the model variables
  $scope.firstName = "John";
};

var secondControllerScope = function ($scope)
{
  // Initialize the model variables
  $scope.lastName = "Doe";
};

工作示例是here

如何在没有指令的情况下在元素上创建隔离范围？

3 个答案: