在自定义指令的作用域绑定中使用符号'@'，'＆'，'='和'>'AngularJS

我已经阅读了很多关于在AngularJS中实现自定义指令时使用这些符号的知识，我仍然不清楚。我的意思是，如果我在自定义指令中使用某个范围值，这意味着什么？在自定义指令的作用域绑定中使用符号'@'，'＆'，'='和'>'AngularJS

var mainApp = angular.module("mainApp", []); 
 
mainApp.directive('modalView',function(){ 
 
    return{ 
 
    restrict:'E', 
 
    scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true 
 
    } 
 
});

究竟什么是我们这里的范围做什么？

我也不确定“scope：'>'”是否存在于官方文档中。它已用于我的项目。

编辑-1

采用“范围： '>'”在我的项目是一个问题，这已得到修复。

来源

2016-06-14 MAC

在AngularJS指令中，范围允许您访问应用指令的元素的属性中的数据。

这被示出最好的一个例子：

<div my-customer name="Customer XYZ"></div>

和该指令定义：

angular.module('myModule', []) 
.directive('myCustomer', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     customerName: '@name' 
    }, 
    controllerAs: 'vm', 
    bindToController: true, 
    controller: ['$http', function($http) { 
     var vm = this; 

     vm.doStuff = function(pane) { 
     console.log(vm.customerName); 
     }; 
    }], 
    link: function(scope, element, attrs) { 
     console.log(scope.customerName); 
    } 
    }; 
});

当scope属性用于该指令是在所谓的“分离范围”模式，这意味着它不能直接访问父控制器的范围。

简单来说，结合符号的含义是：

someObject: '='（双向数据绑定）

someString: '@'

（直接或通过与双花括号符号 {{}}插值通过）

someExpression: '&'（例如，hideDialog()）

该信息存在于AngularJS directive documentation page中，尽管在整个页面中有所扩展。

符号>不是语法的一部分。

但是，<确实存在作为AngularJS component bindings的一部分，并且意味着单向绑定。

来源

2016-06-14 18:02:04 VRPF

什么'@'？ – Homer

值得注意的是，'<'不仅与1.5中的组件兼容，而且与指令兼容。 @Homer''''表示属性为[可选]（https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object）。 –

112

>不在文档中。

<用于单向绑定。

@绑定是为了传递字符串。这些字符串支持内插值的{{}}表达式。

=绑定是用于双向模型绑定。父范围中的模型与指令的隔离范围中的模型链接。

&绑定是将方法传递到您的指令的作用域，以便它可以在您的指令中调用。

当我们在指令中设置范围：true时，Angular js将为该指令创建一个新的范围。这意味着对指令作用域所做的任何更改都不会反映到父控制器中。

来源

2016-06-14 17:46:27 Aravind

AngularJS documentation on directives写得很好，符号的含义。

需要明确的是，你不能只是有

scope: '@'

在指令定义

。您必须具有适用于这些绑定的属性，如下所示：

scope: { 
    myProperty: '@' 
}

我强烈建议您阅读网站上的文档和教程。您需要了解更多有关隔离范围和其他主题的信息。

这里是从上述链接的页面直接引用，关于scope的值：

范围属性可以是真实的，一个对象或一个falsy值：

falsy：将不会为该指令创建范围。该指令将使用其父级的范围。

true：将为该指令的元素创建一个新的子范围，该范围从其父级原型继承。如果同一元素上的多个指令请求新范围，则只创建一个新范围。新的作用域规则不适用于模板的根，因为模板的根始终会获得新的作用域。

{...}（对象散列）：为指令的元素创建了一个新的“隔离”作用域。 'isolate'范围与正常范围不同，因为它不会从其父范围原型继承。这在创建可重用组件时非常有用，它不应该意外读取或修改父范围中的数据。

^{取自https://code.angularjs.org/1.4.11/docs/api/ng/service/ 2017年2月13日$＃编译-scope-，当我们创建一个客户指令许可为CC-by-SA 3.0}

来源

2016-06-14 18:07:36

，该指令的范围可以在隔离范围这意味着指令不与控制器共享一个范围;指令和控制器都有自己的范围。但是，数据可以通过三种可能的方式传递给指令范围。

数据可以使用@字符串字面值，传递字符串值，单向绑定作为字符串传递。
数据可以使用=字符串文字，传递对象，2种方式绑定作为对象传递。
数据可以作为函数传递，&字符串文字，调用外部函数，可以将数据从指令传递到控制器。

来源

2016-10-01 16:41:48

<：单向绑定

=：双向绑定

&：功能结合

@：只传递字符串

来源

2017-09-03 09:58:02

重复相同的答案没有意义，抱歉不是相同的答案它似乎是从上述答案中提取的信息。 – MAC

有时较短的答案往往更实际！ –

如果你可以在短短的几行内解释它，不需要添加垃圾信息:) –

在自定义指令的作用域绑定中使用符号'@'，'＆'，'='和'>'AngularJS

回答

相关问题