Angular.js控制器和Polymer自定義元素之間的通信

Question

我在我的一個項目上使用Angular.js，我想將它與Polymer結合使用。 Angular.js控制器和Polymer自定義元素之間的通信存在一些問題。

什麼是我的問題...

比如我有一個AuthService，一個AuthController它使用AuthService將請求發送到後端（Node.js的使用Express）和一個簡單的登錄表單是這樣的：

<form role="form" ng-submit="login()"> 
    <div> 
     <label for="usernameInput">Username: </label> 
     <input type="text" name="usernameInput" id="usernameInput" placeholder="Username" ng-model="usernameInput" required> 
    </div> 

    <div> 
     <label for="passwordInput">Password: </label> 
     <input type="password" name="passwordInput" id="passwordInput" placeholder="Password" ng-model="passwordInput" required> 
    </div> 

    <div> 
     <label for="rememberMeInput">Remember me: </label> 
     <input type="checkbox" name="rememberMeInput" id="rememberMeInput" ng-model="rememberMeInput"> 
    </div> 

    <input type="submit" name="loginSubmit" value="Log in"> 
</form> 

Everiting是工作的罰款以這種格式，但我想移動形式的聚合物自定義元素裏面是這樣的：

<polymer-element name="cg-login-form"> 
    <template> 
     <div layout vertical> 
      <div class="error hidden">{{ error }}</div> 

      <form role="form" layout vertical center> 
       <div> 
        <paper-input type="text" floatinglabel label="Username" value="{{ inputData.username }}"></paper-input> 
       </div> 

       <div> 
        <paper-input type="password" floatinglabel label="Password" value="{{ inputData.password }}"></paper-input> 
       </div> 

       <div layout horizontal center> 
        <paper-checkbox role="checkbox" checked="{{ inputData.rememberBe }}"></paper-checkbox> 
        <div>Remember me</div> 
       </div> 

       <paper-button label="Log in" raisedbutton role="button" on-click="??????"></paper-button> 
      </form> 
     </div> 
    </template> 

    <script> 
     Polymer('cg-login-form', { 
      inputData: { 
       username: undefined, 
       password: undefined, 
       rememberMe: false 
      } 
     }); 
    </script> 
</polymer-element> 

我的問題是：如何將CA請在表單提交時使用AuthController的登錄方法，並且我希望Polymer元素保持Angular.js獨立。

我在想用輸入數據觸發登錄事件，並在AuthController中偵聽此事件。然後，登錄事件處理程序可以調用AuthContoller的登錄方法，但無法使用該事件獲取發送的數據。

這是我如何射擊裏面的事件：

<paper-button label="Log in" raisedbutton role="button" on-click="{{ login }}"></paper-button> 

Polymer('cg-login-form', { 
    inputData: {...}, 
    login: function() { 
     this.fire('login', { loginData: this.inputData }); 
    } 
}); 

這就是我如何監聽AuthController內登錄事件：

// In this way the detail and the data properties of the event object are undefined 
angular.element("#loginForm").on('login', function(event) { 
    console.log(event.detail); 
    console.log(event.data); 
}); 

// In this way the detail and the data properties of the event object are undefined 
$('#loginForm').on('login', function(event) { 
    console.log(event.detail); 
    console.log(event.data); 
}); 

// In this way the detail property of the event object is set with the sent data 
document.getElementById('loginForm').addEventListener('login', function(event) { 
    console.log(event.detail); 
    console.log(event.data); 
}); 

// In this way the detail property of the event object is set with the sent data 
document.querySelector('#loginForm').addEventListener('login', function(event) { 
    console.log(event.detail); 
    console.log(event.data); 
}); 

爲什麼的document.getElementById （'loginForm'），addEventListener（）和document.querySelector（'＃loginForm'）。addEventListener（）的工作原理和其他兩種方式不起作用？ 如何使用jQuery或jqLit​​e獲取發送的數據？我更喜歡使用它們而不是使用html方法。

如果您告訴我一個更好的方式來進行Angular.js控制器和聚合物自定義元素之間的通信，而不是觸發事件，我會很高興。

非常感謝你，有一個愉快的一天

編輯： 我也可以從AuthController內DOM中的NG-登錄表單元素並通過AuthController的登錄方法就像一個回調一些NG-長形法。然後在表單提交中，ng-login-form可以用輸入數據調用回調函數。

這也可以，但我不認爲這是一個好方法。

Answer 1

我解決了它這種方式

在紙張輸入加法 - inputValue將= 「{{valData}}」 -

例如

<paper-input label="name" id="name" class="label-input-full" inputValue="{{ valData }}"> 
</paper-input> 

添加按鈕提交的onclick事件

例如

<paper-button class="btn-check" type="submit" icon="check" core-overlay-toggle on-click="{{fetchDataFromForm}}" > 
</paper-button> 

最後的腳本，用於發送數據添加功能角度

例如

Polymer('name-element', { 
    fetchDataFromForm: function() { 
     USER_DATA = this.valData; 
     console.log(USER_DATA); 

     var scope = angular.element($("#angular-controller")).scope(); 
     scope.$apply(function(){ 
      scope.contacto = { varAngular: USER_DATA };  
      console.log(scope.contacto); 
      scope.angularFunction(); 
     }); 
    } 
} 

在角......平時做

我希望能幫助你的東西

問候