Question

angular.module('RatingModule').component('starRating', {
    templateUrl: 'rating.html',
    controller: RatingCtrl,
    bindings: {
        maxStars: '=',
        ngModel : '='

//上面是我想在coponents

的绑定中使用ngModel的组件

function RatingCtrl() { i want to use ngModel here }

//下面是index.html，其中ng-model绑定来自app controller的值

<body ng-app="RatingModule" ng-controller="appCtrl as ctrl">
<star-rating ng-model="ctrl.rating.number" max-stars="5"></star-rating>

Answer 1

角度ngModel指令绑定输入，选择，textarea （或自定义表单控件）使用的范围上的属性 NgModelController，由该指令创建和公开。

这不起作用，另外你不应该为自定义属性使用角度名称。

你可以做到

angular.module('RatingModule').component('starRating', {
    templateUrl: 'rating.html',
    controller: RatingCtrl,
    bindings: {
        maxStars: '=',
        myModel : '='

然后

function RatingCtrl() { $scope.myModel }

和

<star-rating my-model="ctrl.rating.number" max-stars="5"></star-rating>

Answer 2

嗯，实际上可以使用ngModel，但它100％毫无价值。您可以在组件上设置ng-model，然后require: 'ngModel'并手动设置ngModelCtrl.$setViewValue，然后点击＆＃39;例如。但正如我之前所说，这是错误的做法。

这是Plunker，基本上，您可以根据需要设置模型

element.on('click', function(){
    ngModelCtrl.$setViewValue(scope.index);
});

$ setViewValue（value，trigger）;更新视图值。

当控件想要更改视图时，应调用此方法   值;通常，这是在DOM事件处理程序中完成的。对于   例如，input指令在输入值时调用它   更改并选择在选择选项时调用它。

Answer 3

DMCISSOKHO提出了一个很好的观点，你不能在这里使用ng-model。试试这个：

angular.module('RatingModule').component('starRating', {
    templateUrl: 'rating.html',
    controller: RatingCtrl,
    bindings: {
        maxStars: '=',
        ratingNumber : '='

并在您的视图中使用

<star-rating rating-number="ctrl.rating.number" max-stars="5"></star-rating>

我怎样才能在组件angularjs的绑定中使用ngModel

3 个答案: