angular組件component沒法傳遞數據的坑

 問題：使用組件component時組件沒法從外獲取到綁定的數據

 先貼上官方component的介紹及demo地址：https://docs.angularjs.org/guide/component; 

將confirm-dialog.html插入到main.html頁面，並將vm.agreemnt傳入到confirm.dialog.html中

 

main.html

在此頁面中使用cost-info來傳輸數據，將main.controller中的vm.agreement傳遞給cost-info ，on-cancel,on-agree用來綁定事件

<div class="container">
    <confirm-dialog 
        cost-info = '$ctrl.agreement'  
        on-cancel='$ctrl.cancleRentalBicycleHandler()'
        on-agree='$ctrl.returnBicycleHandler()'>
    </confirm-dialog>
</div>    

 

cost-info：用來傳輸數據，將main.controller中的vm.agreement傳遞個cost-info

　main.controller

vm.agreement = {
　　'name':'會捕鼠的魚'，
　　'age':'18'
}

function cancleRentalBicycleHandler(){
  // do something  
}

function returnBicycleHandler(){
  // do something  
}

 

　confirm-dialog.html

<div class="dialog">
  <div class="weui-mask"></div>
  <div class="weui-dialog">
    <div class="weui-dialog__bd">description ：{{ $ctrl.costInfo.name }}</div>
    <div class="weui-dialog__bd">bicycleCode ：{{ $ctrl.costInfo.age}}</div>
    <div class="weui-dialog__ft">
      <span ng-click="$ctrl.cancelHandler()"  class="weui-dialog__btn weui-dialog__btn_default">再騎一會</span>
      <span ng-click=" $ctrl.agreeHandler() " class="weui-dialog__btn weui-dialog__btn_primary">確認還車</span>
    </div>
  </div>
</div>

　　

 

 

confirm-dialog.component.js

在confirm-dialog的controller中進行綁定事件的處理

  angular.module('XXX').component('confirmDialog', {
    templateUrl: 'confirm.dialog.html',
    controller: confirmDialogController,
    bindings:{
      costInfo:'<',// '<'數據單項傳遞，‘=’雙向傳遞
      onCancel :'&',// ‘&’綁定事件
      onAgree:'&'
    }
  });
  confirmDialogController.$inject = '$log'];
  function confirmDialogController($log) {
    var vm = this;
    vm.cancelHandler = cancelHandler;
    vm.agreeHandler = agreeHandler;
    function cancelHandler() {
      vm.onCancel();
    }
    function agreeHandler(){
      vm.onAgree();
    }
  }

　　component能夠借鑑directive的使用方法.

使用component在binding中costInfo寫法是這樣的話，在main.html中應該使用cost-info,

使用component在binding中costinfo寫法是這樣的話，在main.html中應該使用costinfo,