AngularJS：不同=

Question

在指令内创建隔离作用域可以将外部作用域映射到内部作用域。我们已经看到了映射属性的六种不同方法：

1. =attr

这些范围映射选项中的每一个都有什么作用？

Answer 1

1. @attr绑定到匹配的DOM属性的计算字符串值
2. =attr绑定到匹配的DOM属性的scope属性

如果目标DOM属性的名称与隔离作用域属性名称匹配，则使用4、5和6。下面是下面这个例子的一把小提琴。

<div ng-app='isolate'>
     <h3>Outer Scope</h3>

    <input type="text" ng-model="myModel" />
    <p>msg: {{ msg }}</p>
     <h3>Inner Scope</h3>

    <div id="inner">
        <div my-directive at="{{ myModel }}" equals="myModel" ampersand="msg=msg+'click'"></div>
    </div>
</div>

angular.module('isolate', [])
    .directive('myDirective', function () {
    return {
        template:
            '<label>@attr</label><input value="{{ myAt }}" />' +
            '<label>@</label><input value="{{ at }}" />' +
            '<label>=attr</label><input ng-model="myEquals" />' +
            '<label>=</label><input ng-model="equals" />' +
            '<label>&attr</label><input type="button" ng-click="myAmpersand()" value="Btn" />' +
            '<label>&</label><input type="button" ng-click="ampersand()" value="Btn" />',
        scope: {
            myAt: '@at',
            myEquals: '=equals',
            myAmpersand: '&ampersand',
            at: '@',
            equals: '=',
            ampersand: '&'
        }
    };
});

Answer 2

这可能会令人困惑，但希望通过一个简单的例子来说明这一点。首先，让我们将模型绑定与行为分离。

这里有一把小提琴，可以帮助把事情联系在一起：http://jsfiddle.net/jeremylikness/3pvte/

并解释。。。如果您的指令如下所示：

<my-directive target="foo"/> 

那么您就有了这些范围的可能性：

{ target : '=' } 

这将绑定范围。目标（指令）到$范围。foo（外部范围）。这是因为=用于双向绑定，当您不指定任何内容时，它会自动将内部作用域上的名称与指令上的属性名称相匹配。范围的更改。目标将更新$范围。富。

{ bar : '=target' } 

这将绑定范围。条形图到$范围。富。这是因为我们再次指定了双向绑定，但告诉指令属性“target”中的内容应该作为“bar”显示在内部范围中。范围的更改。bar将更新$范围。富。

{ target : '@' } 

这将设置范围。以“foo”为目标，因为@的意思是“照字面理解”范围的更改。目标不会在您的指令之外传播。

{ bar : '@target' } 

这将设置范围。bar为“foo”，因为@从目标属性中获取其值。范围的更改。bar不会在您的指令之外传播。

现在让我们谈谈行为。让我们假设您的外部范围具有以下内容：

$scope.foo = function(parm1, parm2) { console.log(parm1 + ": " + parm2); } 

有几种方法可以访问此内容。如果您的HTML是：

<my-directive target='foo'>

然后

{ target : '=' } 

将允许您调用scope。从指令中选择目标（1,2）。

同样的事情，

{ bar : '=target' }

允许您调用scope。从您的指令中删除（1,2）。

更常见的方法是将其确立为一种行为。从技术上讲，符号在父表达式的上下文中计算表达式。这很重要。所以我可以：

<my-directive target="a+b" />

如果父作用域有$scope。a=1和$范围。b=2，然后根据我的指示：

{ target: '&' } 

我可以调用scope.target（），结果将是3。这很重要——绑定作为函数公开给内部范围，但指令可以绑定到表达式。

更常见的方法是：

<my-directive target="foo(val1,val2)"> 

然后您可以使用：

{ target: '&' }

并从指令中调用：

scope.target({val1: 1, val2: 2}); 

这将获取您传递的对象，将属性映射到计算表达式中的参数，然后调用行为，本例调用$scope。foo（1,2）；

您也可以这样做：

<my-directive target="foo(1, val)"/>

这会将第一个参数锁定为文字1，并从指令：

{ bar: '&target' }

然后：

scope.bar(5) 

也就是scope.foo美元（1,5）；