Question

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

＆＃13;

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

＆＃13;

我们在这里对范围做了什么？

我也不确定＆＃34;范围：＆＃39;＆gt;＆＃39;＆＃39;＆＃34; 是否存在于官方文档中。它已在我的项目中使用过。

修改-1

使用＆＃34;范围：＆＃39;＆gt;＆＃39;＆＃39;＆＃34; 是我项目中的问题，并且已修复。

Answer 1

>不在文档中。

<用于单向绑定。

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

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

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

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

Answer 2

在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的一部分存在，并且意味着单向绑定。

Answer 3

<单向绑定

=双向绑定

&功能绑定

@只传递字符串

Answer 4

当我们创建一个customer指令时，该指令的范围可能在Isolated scope中，这意味着该指令不与控制器共享一个范围;指令和控制器都有自己的范围。但是，数据可以通过三种可能的方式传递给指令范围。

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

Answer 5

AngularJS documentation on directives非常符合符号的含义。

要清楚，你不能只有

scope: '@'

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

scope: {
    myProperty: '@'
}

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

以下是上述链接页面的直接引用，内容涉及scope：

的值

scope属性可以是true，对象或falsy值：



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



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



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

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

Answer 6

我在将值与AngularJS 1.6中的任何符号绑定时遇到麻烦。我根本没有得到任何值，只有undefined没得到任何值，即使我做得和在同一文件中起作用的其他绑定完全一样。

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

此操作失败：

bindings: { import_nr: '='}

这有效：

bindings: { importnr: '='}

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

使用符号＆＃39; @＆＃39;，＆＃39;＆amp;＆＃39;，＆＃39; =＆＃39;和＆＃39;＆gt;＆＃39;在自定义指令的范围绑定中：AngularJS

6 个答案: