Директива с атрибутом ng-model, не разрешающим использование $http

Пытаюсь сделать рейтинговую директиву, но я застрял на том, чтобы заставить rating2 работать. Первый рейтинг работал, потому что рейтинг1 жестко запрограммирован в контроллере. Но обычно мне нужно получить сохраненный рейтинг из базы данных, что я пытаюсь сделать с рейтингом2, как вы видите, значение извлекается, но директива не появляется.

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
person Jenny Mok    schedule 11.12.2016    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Начальный рейтинг2 :

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

меня устраивает

проверьте здесь

person Aymen Dhaya    schedule 11.12.2016
comment
LOL, попробуй понять проблему, чувак. - person Jenny Mok; 11.12.2016
comment
Конечно, это сработало для вас, потому что вы не поняли вопроса. - person Jenny Mok; 11.12.2016
comment
чувак, проблема в том, что ты используешь экземпляр (я), который не содержит (рейтинг2) просто. вот почему вы не можете видеть свой рейтинг2. - person Aymen Dhaya; 11.12.2016
comment
кто-нибудь, поставьте этому парню минус и объясните ему, что не так с его ответом. - person Jenny Mok; 11.12.2016
comment
после self.rating2 = res.data.rating2; попробуйте проверить оба значения (this.rating2) и (self.rating2); вы увидите разницу. сам содержит 5, но это НАДА. ваш div использует RatingController, а не экземпляр RatingController внутри RatingController. :) - person Aymen Dhaya; 11.12.2016
comment
какое отношение this и self имеет к $http? пожалуйста, попытайтесь понять, что я должен использовать $http, внимательно прочитайте вопрос :) - person Jenny Mok; 11.12.2016
comment
Пожалуйста, постарайтесь не оскорблять людей, которые пытаются помочь. - person Anirudh Mangalvedhekar; 11.12.2016
comment
Странная реакция от того, кто просит о помощи, обратите внимание, что Хорст Янс дал вам то же решение, что и я. просто постарайтесь быть более гибким. В любом случае удачи :) - person Aymen Dhaya; 11.12.2016

arrow_upward
0
arrow_downward

Прежде всего, я не директивный эксперт, но я пытаюсь помочь. Я думаю, что когда html загружается впервые, значения из базы данных не завершают выполнение и связываются с html. Лучший способ — не использовать директиву вместо использования контроллера для извлечения данных из БД.

person digit    schedule 11.12.2016

arrow_upward
0
arrow_downward

Вы передаете модель без 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>
person oshell    schedule 11.12.2016
comment
Я нашел подвох. используйте ng-if, это решило проблему: D stackoverflow.com/a/28766260/7095330 - person Jenny Mok; 11.12.2016
comment
Это просто еще одно решение. вы также можете использовать маршрутизатор пользовательского интерфейса для разрешения значения перед его передачей, что является более чистым решением. Пытался объяснить вам, почему это происходит. - person oshell; 11.12.2016

arrow_upward
0
arrow_downward

Функция обработчика изменений наблюдателя имеет обратные параметры:

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

Первый аргумент прослушивающей функции должен быть newValue.

ДЕМО на CodePen

ТАКЖЕ

Префикс ng- зарезервирован для основных директив. См. вики по AngularJS — рекомендации.

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. . Если директива не использует услуги этого контроллера, лучше не создавать ее экземпляр.

person georgeawg    schedule 11.12.2016