带有 ng-model 属性的指令未使用 $http 解析答案

【问题标题】：Directive with ng-model Attribute Not Resolving Using $http带有 ng-model 属性的指令未使用 $http 解析
【发布时间】：2016-12-11 13:40:24
【问题描述】：

试图制定评级指令，但我坚持让 rating2 工作。第一个评级有效，因为 rating1 在控制器中是硬编码的。但通常我必须从数据库中获取保存的评分，我正在尝试使用 rating2，因为您可以看到该值已获取但指令未出现。

https://codepen.io/eldyvoon/pen/MbBNLP

  <div star-rating ng-model="rating.rating1" max="10" on-rating-select="rating.rateFunction(rating)"></div>

  <br>but rating2 is actually there:
    {{rating.rating2}}

  <star-rating ng-model="rating.rating2" readonly="rating.isReadonly"></star-rating>

需要指令专家来帮助。

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-model

【解决方案1】：

启动评级2：

function RatingController($http) {
    this.rating1 = 5;
    this.rating2 = 0; //ADD THIS LINE
  var self = this;

对我有用

check here

【讨论】：

LOL 尝试理解问题，伙计。
当然它对你有用，因为你没有得到问题。
老兄，您使用的实例（self）不包含（rating2）的问题。这就是为什么您看不到您的评分2。
有人给这个人投了反对票，并向他解释他的回答有什么问题。
self.rating2 = res.data.rating2;尝试检查 (this.rating2) 和 (self.rating2) 的值；你会看到区别。自包含 5 但这是 NADA。您的 div 使用 RatingController 而不是 RatingController 内的 RatingController 实例。 :)

【解决方案2】：

首先，我不是指导专家，但我正在努力提供帮助。我认为当第一次加载 html 时，来自 db 的值没有完成执行并绑定到 html 中。最好的方法是不使用指令，而是使用控制器从数据库中获取数据。

【讨论】：

【解决方案3】：

您将没有rating2 的模型传递到指令中，父控制器的更改不会影响它，因为变量是在之后创建的。在父作用域的链接器中添加观察者将解决问题；

scope.$parent.$watch('', function(rating){
  updateStars();
});

其他解决方案是在您的控制器中定义一个起始值。

this.rating2 = 1;

请注意，为每个评分设置一个范围变量是不好的设计。拥有一系列评级更简洁，这样做实际上不需要观察者。

https://codepen.io/hoschnok/pen/LbJPqL

角度控制器

function RatingController($http) {
    this.ratings = [4];
    var self = this;
    $http.get('https://api.myjson.com/bins/o0r69').then(function(res){
        self.ratings.push(res.data.rating2);
    });
}

HTML

<div ng-app="app" ng-controller="RatingController as rating" class="container">
    <div ng-repeat="r in rating.ratings">
        <div star-rating ng-model="r" max="10" on-rating-select="rating.rateFunction(rating)"></div>
    </div>
</div>

【讨论】：

我发现了一个窍门。使用 ng-if，它解决了问题：D stackoverflow.com/a/28766260/7095330
这只是另一种解决方案。您还可以在传递值之前使用 ui 路由器来解析值，这是更清洁的解决方案。试图向您解释为什么会发生这种情况。

【解决方案4】：

观察者更改处理函数的参数颠倒了：

    //INCORRECT parameters
    //scope.$watch('ratingValue', function(oldValue, newValue) {
    //CORRECT parameters
    scope.$watch('ratingValue', function(newValue, oldValue) {
      if (newValue) {
        updateStars();
      }
    });

监听函数的第一个参数应该是newValue。

DEMO on CodePen

也

ng- 前缀是为核心指令保留的。见AngularJS Wiki -- Best Practices

JS

  scope: {
    //Avoid using ng- prefix
    //ratingValue: '=ngModel',
    ratingValue: '=myModel',
    max: '=?', // optional (default is 5)
    onRatingSelect: '&?',
    readonly: '=?'
  },

HTML

 <!-- AVOID using the ng- prefix 
 <star-rating ng-if='rating' ng-model="rating.rating2"
       max="10" on-rating-select="rating.rateFunction(rating)">
 </star-rating>
 -->

 <!-- INSTEAD -->
 <star-rating ng-if='rating' my-model="rating.rating2"
       max="10" on-rating-select="rating.rateFunction(rating)">
 </star-rating>

当自定义指令使用名称 ng-model 作为属性时，AngularJS 框架会实例化 ngModelController。如果指令不使用该控制器的服务，最好不要实例化它。

【讨论】：