符号“@"、“&"、“="和“>"的使用在自定义指令的范围绑定中: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 组件绑定的一部分存在a> 表示单向绑定.

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

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