在自定义指令的范围绑定中使用符号'@','&','='和'>':AngularJS

问题描述 投票:136回答:5

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

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

我们究竟在这里做什么?

我也不确定官方文件中是否存在“范围:'>'”。它已在我的项目中使用。

编辑-1

使用“scope:'>'”是我项目中的一个问题,并且已经修复。

angularjs angularjs-directive angularjs-scope
5个回答
106
投票

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


159
投票

>不在文档中。

<用于单向绑定。

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

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

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

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


32
投票

<单向绑定

=双向绑定

&功能绑定

@只通过字符串


3
投票

当我们创建客户指令时,指令的范围可以是隔离范围,这意味着指令不与控制器共享范围;指令和控制器都有自己的范围。但是,数据可以通过三种可能的方式传递给指令范围。

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

2
投票

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

要清楚,你不能只有

scope: '@'

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

scope: {
    myProperty: '@'
}

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

以下是上述链接页面的直接引用,关于scope的值:

scope属性可以是true,对象或falsy值:

  • falsy:不会为该指令创建范围。该指令将使用其父级的范围。
  • true:将为指令的元素创建一个原型继承自其父级的新子范围。如果同一元素上的多个指令请求新范围,则只创建一个新范围。新范围规则不适用于模板的根,因为模板的根始终获得新范围。
  • {...}(对象哈希):为指令元素创建一个新的“隔离”范围。 'isolate'范围与正常范围的不同之处在于它不是原型继承自其父范围。这在创建可重用组件时非常有用,这些组件不应该意外地读取或修改父范围中的数据。

检索2017-02-13来自https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile#-scope-,许可为CC-by-SA 3.0

© www.soinside.com 2019 - 2024. All rights reserved.