將AngularJS函數作爲事件回調傳遞給Polymer 1.0組件

我正在構建一個POC以證明在各種類型的環境中使用聚合物（v1.0）Web組件的能力，使用各種框架。在第一個環境中，一個小的Angular應用程序，我將一個Angular控制器函數傳遞給Web組件來處理表單提交。下面將AngularJS函數作爲事件回調傳遞給Polymer 1.0組件

代碼...當事件被觸發提交

的處理函數被調用得很好，但在功能組件時準備也被稱爲/負載。沒有bueno。

這就是人們如何去實現這樣的聚合物？我只希望處理程序在事件發生時觸發。

本質上我希望能夠根據我調用組件的位置來處理不同的提交，所以我的假設是我會/可以傳遞處理函數。這是我第一次使用聚合物，並希望確保我以正確的方式接近。

// My Angular Controller 
angular.module('controllers') 
    .controller('MainCtrl', function ($scope) { 
     $scope.handleIt = function() { 
      // do submit stuff... 
     }; 
    }); 


// My Polymer Component (the pertinent parts anyway..) 
<dom-module id="my-input">  
    <template> 
     <form> 
      <input type="text"/> 
      <input type="submit" value="submit" on-submit="{{ handler }}"/> 
     </form> 
    </template> 
    <script> 
     Polymer({ 
      is: 'my-input', 
      properties: { 
       handler: { 
        type: Object 
       } 
      } 
     }); 
    </script> 
</dom-module> 


// Finally, my Polymer component invocation in the Angular partial... 
<my-input handler="{{ handleIt() }}"/>

來源

2015-06-25 chrisjordanme

審查所有聚合物文檔，並獲得網絡部件的更好的全面瞭解後，我想我正在試圖做的，是不正確的做法。組件應該是完全自包含的，因此沒有理由像我在這裏試圖做的那樣傳遞一個函數。

來源

2015-06-26 00:20:25 chrisjordanme

將AngularJS函數作爲事件回調傳遞給Polymer 1.0組件

回答

相關問題