在自定义指令的范围绑定中使用符号“ @”，“＆”，“ =”和“>”：AngularJS

我已经在AngularJS中的自定义指令的实现中阅读了很多有关这些符号的用法，但是这个概念对我来说仍然不清楚。我的意思是，如果我在custom指令中使用范围值之一，那意味着什么？

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

我们在这里对示波器做什么呢？

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

编辑1

在我的项目中，使用“ scope：'>'”是一个问题，现已修复。

在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指令文档页面中提供，尽管在整个页面中有所散布。

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

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

> 不在文档中。

< 用于单向装订。

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

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

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

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

< 单向绑定

= 双向绑定

& 功能绑定

@ 仅传递字符串

当我们创建一个客户指令时，指令的范围可能在“隔离范围”中，这意味着该指令不与控制器共享一个范围。指令和控制器都有自己的作用域。但是，可以通过三种可能的方式将数据传递到指令范围。

1. 可以使用@字符串文字，传递字符串值，一种方式绑定将数据作为字符串传递。
2. 可以使用=字符串文字，传递对象（两种方式绑定）将数据作为对象传递。
3. 数据可以作为函数传递给&字符串文字，调用外部函数，可以将数据从指令传递给控制器​​。

关于指令的含义，AngularJS文档写得很好。

要明确的是，您不能只拥有

scope: '@'

在指令定义中。您必须具有适用于这些绑定的属性，例如：

scope: {
    myProperty: '@'
}

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

这是上面链接的页面中关于的值的直接引用scope：

scope属性可以是true，一个对象或一个伪造的值：

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

• true：将为指令的元素创建一个原型继承自其父对象的新子作用域。如果同一元素上的多个指令要求一个新范围，则仅创建一个新范围。新范围规则不适用于模板的根目录，因为模板的根始终获得新的范围。

• {...} （对象哈希）：为指令的元素创建一个新的“隔离”范围。“隔离”作用域与常规作用域的不同之处在于，它不原型地继承自其父作用域。这在创建可重用的组件时很有用，这些组件不应意外读取或修改父范围中的数据。

^{于2017 年2月13日从https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile＃-scope-检索，许可为CC-by-SA 3.0}

我在将值与AngularJS 1.6中的任何符号绑定时遇到麻烦。undefined即使我确实做到了与工作在同一文件中的其他绑定完全相同的方式，但我根本没有得到任何值。

问题是：我的变量名带有下划线。

这将失败：

bindings: { import_nr: '='}

这有效：

bindings: { importnr: '='}

（与原始问题并不完全相关，但这是我看过时搜索量最高的结果之一，因此希望这可以帮助遇到相同问题的人。）