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(); 
     }); 
    } 
} 

在角......平时做

我希望能帮助你的东西

问候