Question

我正在学习AngularJS中的指令，并发现在一些例子中，添加一个孤立的范围（@，=或＆amp;）。它们有时不仅会添加隔离范围，还会添加其后的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

这是来自开发者指南

对于属性名称与所需值相同的情况要绑定到指令范围内，您可以使用此简写语法：

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

意味着你可以在你的指令中使用name: "@"如果你有同名的html属性，其中声明了指令

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

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

仅在AngularJS中隔离范围+绑定名称与隔离范围之间的差异

1 个答案: