为何双向绑定有时没有使用角点的工作？ [英] Why does two way binding sometimes work without using a dot in Angular?

问题描述

考虑这个小提琴：当你选择一个日期小提琴1 ，你会发现，文字在它上面没有更新。这是因为我不得不使用一个对象在我的名单，像这样：小提琴2 （简体）。

但是，在另一方面，这样做的工作，没有点：小提琴3

有人能解释一下有什么区别小提琴1和小提琴3之间？我读过有关原型继承（ unerstanding范围），但我不不懂这种行为。

3拨弄：

HTML

 ＆LT; D​​IV NG控制器=MyCtrl＆GT;
  您好，{{名}}！
  ＆LT;按钮NG点击=可见=看得见！＆GT;＆切换LT; /按钮＆GT;  ＆LT; D​​IV NG秀=看得见＆GT;
    有些内容
    ＆lt;样品可见=看得见＆GT;＆LT; /样品＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

使用Javascript：

  VAR对myApp = angular.module（'对myApp'，[]）;功能MyCtrl（$范围）{
    $ scope.name ='超级英雄';
    $ scope.visible = TRUE;
}myApp.directive（样本功能（）{
    返回{
        限制：'E'，
        模板：'＆LT;跨度NG点击=隐藏（）的风格=光标：指针;＆GT; X＆LT; / SPAN＆GT;，
        范围：{
            可见：'='
        }，
        链接：功能（范围，元素，属性）{
            scope.hide =功能（）{
                的console.log（scope.visible）;
                scope.visible = FALSE;
            }
        }
    }
}）;
 

解决方案

如果您的指令创建一个隔离范围（有没有中间范围），它使用 = 双向绑定，你并不需要使用对象属性＆ndash的;即，你并不需要一个点，以让它开始工作。

在小提琴1和2，NG-重复是建立一个中间（的孩子）范围的中典型从MyCtrl范围继承。在这种情况下，你需要使用对象的属性。

Consider this fiddle: Fiddle 1 When you select a date, you will notice that the text above it is not updating. This is because I had to use an object in my list, like this: Fiddle 2 (simplified).

But, on the other hand, this does work, without a dot: Fiddle 3

Could someone explain what the difference is between fiddle 1 and fiddle 3? I've read about prototypical inheritance (unerstanding scopes), but I don't understand this behavior.

Fiddle 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;
            }
        }
    }
});

解决方案

If your directive creates an isolate scope (and there are no intermediate scopes), and it uses = for two-way databinding, you don't need to use object properties – i.e., you don't need a "dot" to get it to work.

In Fiddle 1 and 2, ng-repeat is creating an intermediate (child) scope that prototypically inherits from the MyCtrl scope. In this case, you need to use object properties.

这篇关于为何双向绑定有时没有使用角点的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！