1. 程式人生 > >angularjs指令之間的資料互動

angularjs指令之間的資料互動

指令可以通過獨立作用域接收資料, 使用=,如

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)"必須單獨接收物件中的屬性,可以同時接收多個屬性。