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

Question

Попытка сделать рейтинговую директиву, но я застрял в получении рейтинга2 для работы. Первый рейтинг работал, потому что рейтинг1 жестко запрограммирован в контроллере. Но обычно я должен получить сохраненный рейтинг из db, который я пытаюсь сделать с 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> 

Потребность эксперт директивы, чтобы помочь.

Answer 1

Инициировать rating2:

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

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

Когда обычай directve использует имя ng-model для атрибута, рамки AngularJS конкретизирует ngModelController. Если директива не использует службы этого контроллера, лучше не создавать ее.