使用符号"@"，“&"，"="和“>"在自定义指令的范围绑定中:AngularJS [英] Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS

问题描述

我已经在AngularJS中的自定义指令的实现中阅读了很多有关这些符号的用法，但是这个概念对我来说仍然不清楚.

I have read a lot about the use of these symbols in the implementation of custom directives in AngularJS but the concept is still not clear to me.

如果我在自定义指令中使用范围值之一，那是什么意思?

What does it mean if I use one of the scope values in the custom directive?

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

我们在这里对示波器到底做了什么?

What exactly are we doing with the scope here?

我也不确定官方文档中是否存在"scope:'>'". ("scope:'>'"的使用在我的项目中是一个问题，并且已得到解决.)

I am also not sure whether "scope:'>'" exists in the official documentation or not. It's been used in my project. (The use of "scope:'>'" was an issue in my project and It has been fixed.)

推荐答案

在AngularJS指令中，作用域使您可以访问应用了该指令的元素的属性中的数据.

In an AngularJS directive the scope allows you to access the data in the attributes of the element to which the directive is applied.

用一个例子可以最好地说明这一点:

This is illustrated best with an example:

<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属性时，伪指令处于所谓的隔离范围"模式，这意味着它不能直接访问父控制器的范围.

When the scope property is used the directive is in the so called "isolated scope" mode, meaning it can not directly access the scope of the parent controller.

用非常简单的术语来说，绑定符号的含义是:

In very simple terms, the meaning of the binding symbols is:

someObject: '='(双向数据绑定)

someString: '@'(直接传递或通过使用双大括号表示法{{}}的插值传递)

someString: '@' (passed directly or through interpolation with double curly braces notation {{}})

someExpression: '&'(例如hideDialog())

此信息显示在 AngularJS指令文档页面中，尽管在整个页面中有所体现.

This information is present in the AngularJS directive documentation page, although somewhat spread throughout the page.

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

The symbol > is not part of the syntax.

但是，<确实是 AngularJS组件绑定的一部分，并且表示一种方式绑定.

However, < does exist as part of the AngularJS component bindings and means one way binding.

这篇关于使用符号"@"，“&"，"="和“>"在自定义指令的范围绑定中:AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！