Polymer-AngularJS zwei-Wege-Datenbindung

Habe ich einige custom-element erstellt mit Polymer. Nennen wir Sie " x-Eingang, und es sieht wie folgt aus:

<polymer-element name="x-input" attributes="name">
    <template>
        <input type="text" value={{name}}> <span>{{name}}</span>
        <br />
        <input type="range" value={{age}} > <span>{{age}}</span>
    </template>
 </polymer-element>

Und ich habe diesen html verwende ich Eckige:

<html ng-app="testApp">
    <body ng-controller="AppCtrl">
        <input id="outer_input" type="text" ng-model="kids[0].name" value={{kids[0].name}} /> <br />
        <span>name: {{kids[0].name}} age: {{kids[0].age}}</span><br />
        <x-input ng-repeat="kid in kids" name={{kid.name}} age={{kid.age}}>
        </x-input>
    </body>
</html>

Hier ist die JS:

var testApp = angular.module('testApp', []);

testApp.controller('AppCtrl', function ($scope, $http)
{
    $scope.kids = [{"name": "Din", "age": 11}, {"name": "Dina", "age": 17}];
}

Ist das problem mit der zwei-Wege Datenbindung. Wenn ich das #outer_input input-Wert x-Eingang auf die inneren Werte an (name und Alter) geändert werden.

Aber wenn ich das custom-element Eingang nur die inneren gebundenen Variablen geändert werden.

Wie kann ich das ändern den Wert der gebundenen Variablen innerhalb der polymer-element und es wird das Modell ändern, und alle äußeren Schranke UI und Daten (bidirektionale Bindung)?

Dank

  • wo ist Ihre polymer-element-Vorlage liegt im html-tag?
  • Oh, ich glaube, ich sehe, Sie haben einen Tippfehler obwohl, x-inut sollte x-Eingang
  • Danke für die Korrektur, aber es ist nicht das Problem.
  • Ich denke, das Hauptproblem ist, dass man nicht aufrufen $scope.apply wenn der Wert der kid.name oder kid.age änderungen. Eckig weiß nicht, die Sachen auf dem Umfang ändert, es sei denn, Sie verwenden apply. Sie müssen auch übergeben werden, die tatsächliche kid - Objekt, um die polymer-element, anstatt nur die Saiten es hat als Attribute, so dass Sie können ändern Sie die Eigenschaften für das Objekt, der Winkel kennt.
  • können Sie zeigen, wie pass-Objekt, um die polymer-element?
  • Ugh, das scheint nicht, wie es funktionieren wird, da die Attribute auf die x-input sind strings durch die Zeit, die der polymer-element bekommt einen Blick auf Sie. Sie könnte werfen Sie einen Blick auf etwas wie die Antwort hier: stackoverflow.com/questions/15911300/... auf der x-input element.

InformationsquelleAutor vlio20 | 2014-05-09
  1. 6

    Wenn Sie sagen, es zu, Polymer spiegeln änderungen des Modells wieder aus der veröffentlichten Eigenschaft (Attribut), aber das Problem ist, dass das Eckige nicht Beobachter-Bindungen von Parametern.

    Es einen patch gibt, der diese Arbeit, wie Sie wollen: https://github.com/eee-c/angular-bind-polymer

    Weitere Infos hier: http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html

    • Es ist nicht möglich zu binden-Objekt. Ist es hinsichtlich Drittanbieter-Bibliotheken? werfen Sie einen Blick auf diese SO: stackoverflow.com/q/24340258/1691423
    • Dieser patch hat nicht funktioniert für meine Papier-input.
    • ja, ich kann mich nur binden strings!!!
    • Sieht aus wie dieses ist aufgrund der MutationObserver Einschränkung...
    InformationsquelleAutor ebidel
Schreibe einen Kommentar