为什么隔离范围“@”和$ apply不能按预期工作

时间:2013-11-17 16:13:35

标签: angularjs-directive angularjs-scope angularjs-controller

我一直在研究AngularJS,特别是看了视频:

http://www.thinkster.io/pick/IgQdYAAt9V/angularjs-directives-talking-to-controllers

这个视频展示了一个与控制器通信的指令示例,我已经修改了一些试图理解是否也可以使用隔离范围来获得类似的结果。考虑一个HTML代码段,例如:

<div enter="loadMoreTweets()">Roll Over This</div>

和Angular控制器和指令定义为:

app.controller('scopeCtrl', function($scope) {
    $scope.loadMoreTweets = function () {
        alert("loading more tweets");
    }
}).directive('enter', function() {
    return {
        restrict: "A",
        scope: {enter: "@"},
        link: function(scope, element, attrs) {
            element.bind("mouseenter", function() {
                //scope.$apply(attrs.enter);
                scope.$apply(scope.enter);
            })
        }
    }
});

滚动DIV不会导致任何错误,也不会产生任何影响。

如果我注释掉隔离范围并使用element.bind()中的注释行而不是对scope.enter的引用,那么滚动DIV会导致alert()按预期显示。< / p>

问题:如果“@”隔离范围在属性的值和范围的属性之间创建单向绑定,那么我会期望scope.enter == attrs.enter。显然这不是真的。为什么呢?

1 个答案:

答案 0 :(得分:1)

原因是'@'是一种单向数据绑定,但它始终作为string

传递
scope: {              // set up directive's isolated scope
  name: "@",          // name var passed by value (string, one-way)
  age: "=",           // age var passed by reference (two-way)
  showName: "&"       // passed as function
}
  

at符号“@”表示此变量按值传递。该指令接收一个字符串,该字符串包含从父作用域传入的值。该指令可以使用它,但它不能更改父作用域中的值(它是隔离的)。