我如何在组件 angularjs 的绑定中使用 ngModel答案

【问题标题】：how can i use ngModel inside bindings of components angularjs我如何在组件 angularjs 的绑定中使用 ngModel
【发布时间】：2016-12-24 22:40:07
【问题描述】：

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

//以上是我想在组件绑定中使用 ngModel 的组件

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

// 下面是 index.html，其中 ng-model 正在绑定来自应用控制器的值

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

【问题讨论】：

标签： angularjs binding components

【解决方案1】：

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

这里是Plunker，基本上可以随意设置模型

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

$setViewValue(值, 触发器);更新视图值。

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

【讨论】：

我不需要使用指令...我的老板说要使用组件来评级星星...我做了评级，但他希望我把 ng-model 放在index.html 所以当有人重用我的组件时，他可以放平均评分，当他打开评分模板时，星星上的亮点取决于平均值......例如，他放了 ng-model="ctrl.rating.number"等于 4 并且它存在于基本控制器（不是组件的控制器）上，所以我需要在组件的控制器上使用这个 ctrl.binding.number...
@JoeSleiman 你的老板错了。可重用组件不应依赖于外部控制器。在基于组件的应用程序中使用控制器（body ng-controller）在架构上也是错误的。看起来他想要一个经典 MVC 应用程序中的指令。
@JoeSleiman，我刚刚写了一个例子，你可以如何使用 ngModel。组件只是指令的包装。
@Kindzoku stackoverflow.com/questions/39014858/… 这是所有需要的文件...我需要你再读一遍，，，如果你能帮助我，请
嗯，实际上可以使用 ngModel，但它 100% 毫无价值。 - 我不同意，似乎很多人忽略了集成到 ngModel 控制器而不是常规绑定的次要效果。这包括 ng-model-options、验证管道和格式化程序/解析器管道等。

【解决方案2】：

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>

【讨论】：

这不是和@dmcissokho 一样的答案吗？
我的老板想使用 ng-model 并将其绑定到组件的控制器（我正在训练阶段）绑定：{ ngModel : '=' }
@m0rjjj，您复制了 DMCISSOKHO 的答案。刚刚更改了一个 attr 名称。
@Kindzoku 不是我的答案 ;)
@gyc，是的，对不起：D

【解决方案3】：

angular ngModel 指令绑定 input,select, 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>

【讨论】：

$scope 未定义...我想要 ngModel 而不是 myModel
stackoverflow.com/questions/39014858/… 这是所有需要的文件...我需要你再读一遍,,, 如果你能帮我请@DMCISSOKHO