Angular 1.5 komponent z ng-modelem

Czy można używać modelu ng z komponentem? Chciałbym powiązać zmienną scope z komponentem ng-model. Mam plunkered my issue. Chciałbym, aby komponent my-input był powiązany z zmienną z zakresu userData.name.Angular 1.5 komponent z ng-modelem

Używam komponentów Angular JS 1.5.6 i nie chcę używać dyrektywy.

<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>

Źródło

2016-06-20 Mouss

Naprawiłem dla ciebie plunker.

Nazwy parametrów użytkownika muszą odpowiadać nazwom w składniku. Powinieneś używać nazw camelCased w swoim komponencie i kebab-cased w szablonach. Przykład:

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

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

Odnośnie twojego pytania na temat korzystania NG-modelu - można użyć dowolnego parametru, jak daleko można zdefiniować go w komponencie. W tym przypadku nazwa twojego parametru powinna być ngModel.

Źródło

2016-06-20 22:26:10 masitko

to działa bardzo dobrze thanx dużo! Mam jedno ostatnie pytanie. Jak powiązać dane, gdy masz komponent formularza złożony z przycisku i komponentów wejściowych: zobacz ten nowy [plunk] (http://plnkr.co/edit/jLnrDeledkkJBLaKWKjZ) – Mouss

Można użyć tego kodu:

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' 
};

Źródło

2016-11-22 14:39:41 jcubic

dotyczący tego.ngModel jest niezdefiniowany, czy próbowałeś umieszczenie go w haku $ onInit zamiast limitu czasu? – jzig

@jzig tak, tak to teraz robię. Zaktualizuję odpowiedź. – jcubic

Myślę, że jest to lepsze rozwiązanie dla tego pytania, ponieważ faktycznie używa ngModel. NgModel jest niezbędny w niektórych przypadkach użycia, takich jak sprawdzanie poprawności formularza. – narduk

Angular 1.5 komponent z ng-modelem

Odpowiedz

Powiązane problemy