javascript - 在 ng-repeat 之外创建一个新作用域

Question

这个想法是如何通过按文本旁边的按钮来修改文本列表。我们还可以将其应用于列表之外的标题文本。

HTML:

<div ng-controller="TextController">
    <div class="title">
        <span>{{ text }}</span>
        <button ng-click="edit()">Edit</button>
    </div>

    <ul>
        <li ng-repeat="text in list">
            <span>{{ text }}</span>
            <button ng-click="edit()">Edit</button>
        </li>
    </ul>
</div>

JavaScript:

angular.module("app").
    controller("TextController", function($scope) {
        $scope.text = "hello";
        $scope.list = [....]; // list of texts;

        $scope.edit = function() {
            this.text += " world";
        };
    });

我不确定我写的是否正确。但是，除了标题中的编辑按钮之外，一切正常，当我尝试仅编辑标题时，它意外地编辑了其子范围内的所有文本。

我想做的是给标题一个新的范围，以便按钮不会影响其他文本，因为它不是任何范围的父级。

Answer 1

是的，你想做的是正确的:

{{text}} 变量绑定(bind)到相同的 Controller 范围。所以编辑按钮只是更新该值，使其随处变化