27
2020
04

Angular Directive中restrict 中分别可以怎样设置?scope中@,=,&有什么区别?

restrict中可以分别设置:


A匹配属性

E匹配标签

C匹配class

M 匹配注释

当然你可以设置多个值比如AEC,进行多个匹配。


在scope中,@,=,&在进行值绑定时分别表示


@获取一个设置的字符串,它可以自己设置的也可以使用{{yourModel}}进行绑定的;

= 双向绑定,绑定scope上的一些属性;

& 用于执行父级scope上的一些表达式,常见我们设置一些需要执行的函数

angular.module('docsIsolationExample', [])  

.controller('Controller', ['$scope', function($scope) {

  $scope.alertName = function() {

      alert('directive scope &');

  }

}])

.directive('myCustomer', function() {

  return {

    restrict: 'E',

    scope: {

      clickHandle: '&'

    },

    template: '<button ng-click="testClick()">Click Me</button>',

    controller: function($scope) {

 

      $scope.testClick = function() {

        $scope.clickHandle();

 

      }  

    }

  };

});


<div ng-app="docsIsolationExample">  

<div ng-controller="Controller">  

  <my-customer click-handle="alertName()"></my-customer>

</div>  

 </div>

Codepen Demo


< 进行单向绑定。

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。