Góc 1,5 thành phần với ng-model

Có thể sử dụng ng-model với một thành phần không? Tôi muốn ràng buộc một biến phạm vi cho một thành phần với ng-model. Tôi có plunkered my issue. Tôi muốn thành phần đầu vào của tôi được liên kết với biến từ phạm vi userData.name.Góc 1,5 thành phần với ng-model

Tôi đang sử dụng các thành phần Angular JS 1.5.6 và muốn tránh sử dụng chỉ thị.

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

Nguồn

2016-06-20 Mouss

Tôi đã sửa số plunker cho bạn.

Thông số tên của bạn phải tương ứng với tên trong thành phần của bạn. Bạn nên sử dụng các tên camelCased trong thành phần của bạn và kebab-cased trong các mẫu của bạn. Ví dụ:

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

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

Về câu hỏi của bạn về việc sử dụng ng mô hình - bạn có thể sử dụng bất kỳ thông số như xa bạn định nghĩa nó trong thành phần của bạn. Trong trường hợp này, tên của thông số của bạn phải là ngModel.

Nguồn

2016-06-20 22:26:10 masitko

cho nó hoạt động rất tốt thanx a lot! Tôi sẽ có một câu hỏi cuối cùng. Xin vui lòng, làm thế nào để bạn ràng buộc dữ liệu khi bạn có một thành phần biểu mẫu bao gồm với các thành phần nút và đầu vào: xem [plunk] mới này (http://plnkr.co/edit/jLnrDeledkkJBLaKWKjZ) – Mouss

Bạn có thể sử dụng mã này:

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

Nguồn

2016-11-22 14:39:41 jcubic

liên quan đến this.ngModel là không xác định bạn đã thử đặt nó vào trong hook $ onInit thay vì timeout? – jzig

@jzig có, đó là cách tôi làm điều đó ngay bây giờ. Tôi sẽ cập nhật câu trả lời. – jcubic

Tôi nghĩ đây là giải pháp tốt hơn cho câu hỏi vì nó thực sự sử dụng ngModel. NgModel là cần thiết cho một số trường hợp sử dụng như xác nhận mẫu. – narduk

Góc 1,5 thành phần với ng-model

Trả lời

Các vấn đề liên quan