javascript - 独立作用域+绑定(bind)名称和仅在 AngularJS 中的独立作用域之间的区别

Question

我正在学习 AngularJS 中的指令，并在一些示例中发现，在添加隔离范围(@、= 或 &)时。他们有时不仅添加隔离范围，还会在其后添加 ngModel 名称。即:“@name”而不仅仅是“@”。

那么有什么区别:

myApp.directive('zippy', function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: { 
            name: "@" // <----
        },
        template: "<div>{{name}}<div ng-transclude></div></div>",
        link: function(scope, element, attrs) {
            console.log(scope.name);
        }
    }
});

还有这个:

myApp.directive('zippy', function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: { 
            name: "@name" // <----
        },
        template: "<div>{{name}}<div ng-transclude></div></div>",
        link: function(scope, element, attrs) {
            console.log(scope.name);
        }
    }
});

Answer 1

这来自开发者指南

For cases where the attribute name is the same as the value you want to bind to inside the directive's scope, you can use this shorthand syntax:

...
scope: {
  // same as '=customer'
  customer: '='
},
...

意味着如果声明指令的地方有相同名称的 html 属性，则可以在指令中使用 name: "@"

<div zippy name="myName"></div>

记住属性名称不应与属性中的表达式匹配。它可以是范围内的任何属性。