Componente angolare 1.5 con ng-model

È possibile utilizzare il modello ng con un componente? Vorrei associare una variabile scope a un componente con ng-model. Ho plunkered my issue. Vorrei che il componente my-input venisse associato alla variabile dall'ambito userData.name.Componente angolare 1.5 con ng-model

Utilizzo componenti di Angular JS 1.5.6 e desidero evitare l'uso di direttive.

<body ng-controller="MyCtrl"> 
    <div class="container"> 
    <h2>My form with component</h2> 
    <form role="form"> 
     <div class="form-group"> 
     <label>First name</label> 
     <my-input placeholder="Enter first name" ng-model="userData.name"></my-input> 
     </div> 
    </form> 
    </div> 
</body>

fonte

2016-06-20 Mouss

Ho risolto il plunker per voi.

I nomi dei parametri dell'utente devono corrispondere ai nomi nel componente. Dovresti usare nomi CamelCased nel tuo componente e Kebab-Cased nei tuoi modelli. Esempio:

bindings: { 
     myPlaceholder: '@', 
     myModel:'=' 
    } 

<my-input my-placeholder="Enter first name" my-model="userData.firstName">

quanto riguarda la tua domanda sull'uso ng-modello - è possibile utilizzare qualsiasi parametro, per quanto lo si definisce nel componente. In questo caso il nome del parametro deve essere ngModello.

fonte

2016-06-20 22:26:10 masitko

funziona molto bene Grazie mille! Avrei un'ultima domanda. Per favore, come si fa a legare i dati quando si ha un componente form composto da pulsante e componenti di input: vedere questo nuovo [plunk] (http://plnkr.co/edit/jLnrDeledkkJBLaKWKjZ) – Mouss

È possibile utilizzare questo codice:

function myInputController($scope) { 
    var self = this; 
    this.$onInit =() => { 
     this.ngModel.$render =() => { 
      self.model = self.ngModel.$viewValue; 
     }; 
     $scope.$watch(function() { return self.model; }, function(value) { 
      self.ngModel.$setViewValue(value); 
     }); 
    }; 
} 
module.component('myInput', { 
    require: { 
     ngModel: '^ngModel' 
    }, 
    template: '<input ng-model="vm.model"/>', 
    controller: myInputController, 
    controllerAs: 'vm' 
};

fonte

2016-11-22 14:39:41 jcubic

per quanto riguarda this.ngModel essendo indefinito hai provato inserendolo nel gancio $ onInit invece del timeout? – jzig

@jzig sì, è così che lo faccio ora. Aggiornerò la risposta – jcubic

Penso che questa sia una soluzione migliore per la domanda dal momento che in realtà utilizza ngModel. NgModel è necessario per alcuni casi d'uso come la convalida del modulo. – narduk

Componente angolare 1.5 con ng-model

risposta

Problemi correlati