angularjs指令之间的数据交互

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/l598465252/article/details/78296080

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

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)"必须单独接收对象中的属性，可以同时接收多个属性。

---