angularjs指令之间的数据交互

来源:互联网 发布:知乎怎么取消关注话题 编辑:程序博客网 时间:2024/05/21 06:36

指令可以通过独立作用域接收数据, 使用=,如

app.directive('myDirective', function() {  return {    restrict: 'E',    transclude: true,    scope: {      option: '=option'  //key相同时也可以使用option: '='    },    template: '<p>{{option.title}}</p>'  };

使用:
<myDirective option="{title: "标题"}"></myDirective>

同样的,也可以用&来接收一个回调函数:

app.directive('myDirective', function() {  return {    restrict: 'E',    transclude: true,    scope: {      option: '=option',      click: '&myClick' // &    },    template: '<p ng-click="click({backData: data})">{{option.title}}</p>',    link: function($scope, element, attr) {      $scope.data = {        name: 'angularjs',        part: 'directive'      }    }  };

使用:angularjs的html模板不支持驼峰命名规则,所有在html中要使用-
<myDirective my-click="showData(backData)"></myDirective>


注意:

第一次使用的时候很容易入坑,比如这个错误
TypeError: Cannot use 'in' operator to search for 'confirm' in
解决:
原因是指令中ng-click="click({backData: data})"回调传入的参数必须是一个对象,并且在接收变量的时候my-click="showData(backData)"必须单独接收对象中的属性,可以同时接收多个属性。


原创粉丝点击