为什么有时在 Angular 中不使用点的情况下双向绑定也可以工作？答案

【问题标题】：Why does two way binding sometimes work without using a dot in Angular?为什么有时在 Angular 中不使用点的情况下双向绑定也可以工作？
【发布时间】：2013-08-02 19:30:38
【问题描述】：

考虑这个小提琴：Fiddle 1 当你选择一个日期时，你会注意到它上面的文本没有更新。这是因为我必须在列表中使用一个对象，例如：Fiddle 2（简化）。

但是，另一方面，这确实有效，没有点：Fiddle 3

有人能解释一下小提琴 1 和小提琴 3 的区别吗？我读过原型继承 (unerstanding scopes)，但我不理解这种行为。

小提琴 3：

HTML：

<div ng-controller="MyCtrl">
  Hello, {{name}}!


  <button ng-click="visible = !visible">Toggle</button>

  <div ng-show="visible">
    Some content 
    <sample visible="visible"></sample>
  </div>
</div>

Javascript：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.visible = true;
}

myApp.directive("sample", function(){
    return {
        restrict: 'E',
        template: '<span ng-click="hide()" style="cursor: pointer;">X</span>',
        scope:{
            visible: '='
        },
        link: function(scope, element, attributes){
            scope.hide = function(){
                console.log(scope.visible);
                scope.visible = false;
            }
        }
    }
});

【问题讨论】：

您真的打算将第一个</div> 放在Hello ... 行之后吗？这意味着 HTML 的其余部分超出了 MyCtrl 的范围。
@MarkRajcok 你是对的。我已经把所有东西都放在了控制器中。

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

如果您的指令创建了一个隔离范围（并且没有中间范围），并且它使用= 进行双向数据绑定，则您不需要使用对象属性 - 即，您不需要 "点”以使其工作。

在 Fiddle 1 和 2 中，ng-repeat 正在创建一个中间（子）范围，该范围在原型上继承自 MyCtrl 范围。在这种情况下，您需要使用对象属性。

【讨论】：

【解决方案2】：

Fiddle3 是有道理的，因为它试图隐藏自己并且所有变量都在它自己的隔离范围内。

如果你想实现类似点击X，触发Toggle按钮隐藏sample控件，它会更类似于Fiddle1。因为在Fiddle1 中，您实际上想弄清楚如何在隔离范围之外修改值，而不是在指令创建的范围内。

【讨论】：

我已经更新了我的小提琴，它不正确。我现在的意思是，在指令中，我可以操纵MyCtrl 控制器的visible 变量，而无需使用点。当我点击 X 时，不仅隐藏了示例标签，还隐藏了包含 div，因为它的 ng-show 设置为可见。我希望你明白我的意思:)