Question

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

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

需要指导专家帮助。

Answer 1

发起评分2：

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

它对我有用

check here

Answer 2

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

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

Answer 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

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

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

使用$ http的ng-model属性未解析的指令

4 个答案: