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

Question

我已经阅读了很多关于在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:'>'"是我项目中的一个问题,并且已经修复.

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指令文档页面中,尽管在整个页面中有所分布.

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

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

Answer 3

<:单向绑定

=:双向绑定

&:功能绑定

@:只传递字符串