Ошибка Angular 1: [ng:areq] — контроллер внутри контроллера

Я пытаюсь использовать угловой рейтинг из этого http://plnkr.co/edit/kFKejRU0G2wmkD7GlNdH?p=preview

Вот мой угловой код:

var ProfileApp = angular.module('ProfileApp', ['ui.bootstrap']);
ProfileApp.controller('getprofile', function($scope, $http) {
//Some codes are here

})

  var RatingDemoCtrl = function ($scope) {

    $scope.myRate = 0;

     $scope.submit = function() {
         console.log($scope.percent) ; //null
     }

     $scope.rate = 1;
     $scope.max = 5;
     $scope.isReadonly = false;
     $scope.percent = 20;

      $scope.hoveringOver = function(value,object) {
        console.log('hoveringOver', value);
        $scope.overStar = value;
        $scope.percent = (100 * $scope.overStar) / $scope.max;
      };
      
       $scope.hoveringLeave = function(rate) {
         console.log('hoveringLeave',  $scope.rate);
        
       $scope.percent = (100 * $scope.rate) / $scope.max;
      };
    };

Код выше используется для рейтинга. Вот html-код.

<body id="home" ng-app="ProfileApp">
    <div ng-controller="getprofile">

//Some html codes 

             <div ng-controller="RatingDemoCtrl" class="well well-small">
<form class="Scroller-Container" ng-submit="submit()" ></form>

    <rating  value="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="hoveringLeave(rate)" ></rating>
    <span class="badge" ng-class="{'badge-warning': percent<30, 'badge-info': percent>=30 && percent<70, 'badge-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

<input type="submit" id="submit" value="Submit" />
</form>

<pre>{{percent}}</pre>

</div>

Как видите, у меня есть вложенный контроллер, и это выдает ошибку Error: [ng:areq].

Что можно сделать сейчас? Есть ли способ исправить это?

Обновлять

После использования кода saj теперь я получаю сообщение об ошибке. angular.min.js:101 Ошибка: [ngRepeat:dupes] http://errors.angularjs.org/1.3.2/ngRepeat/dupes?p0=r%20in%20range&p1=object%3A10&p2=%7B%22stateOn%22%3Anull%2C%22stateOff%22%3Anull%7D

Ни одна звезда не заходит. Я проверяю код и коды ниже.

<div ng-controller="RatingDemoCtrl" class="well well-small ng-scope">
                                        <form class="Scroller-Container ng-pristine ng-valid" ng-submit="submits()"></form>
                                        <span ng-mouseleave="reset()" value="rate" max="max" readonly="readonly" on-hover="hoveringOver(value)" on-leave="hoveringLeave(rate)" class="ng-isolate-scope">
    <!-- ngRepeat: r in range -->
</span>
                                        <span class="badge ng-binding badge-warning ng-hide" ng-class="{'badge-warning': percent<30, 'badge-info': percent>=30 &amp;&amp; percent<70, 'badge-success': percent>=70}" ng-show="overStar &amp;&amp; !isReadonly">20%</span>
                                        <input type="submit" id="submit" value="Submit">
                                        

                                    <pre class="ng-binding">20</pre>

                                  </div>

javascript html angularjs angular-controller
person Rocx    schedule 01.01.2018    source источник
comment
вам нужно отделить код контроллера   -  person Sajeetharan    schedule 01.01.2018
comment
если ответ решил проблему, с которой вы столкнулись, когда был задан вопрос, вы должны принять ответ, а затем задать новый вопрос (ссылаясь на этот вопрос, если это уместно), а не изменять вопрос, чтобы задать совершенно другую проблему.   -  person Claies    schedule 02.01.2018
comment
Используете ли вы какие-либо маршруты в своем приложении? $состояние или $маршрут?   -  person Mohamed Sameer    schedule 02.01.2018
comment
@MohamedSameer нет, я ничего не использую.   -  person Rocx    schedule 02.01.2018
comment
Можешь опубликовать свой маршрут? файл angularjs   -  person Mohamed Sameer    schedule 02.01.2018
comment
Я думаю, все под вопросом.   -  person Rocx    schedule 02.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вам просто нужно выделить контроллер 'RatingDemoCtrl'

 app.controller('RatingDemoCtrl', function($scope) {
      $scope.myRate = 0;
      $scope.submit = function() {
        console.log($scope.percent); //null
      }
      $scope.rate = 1;
      $scope.max = 5;
      $scope.isReadonly = false;
      $scope.percent = 20;
      $scope.hoveringOver = function(value, object) {
        console.log('hoveringOver', value);
        $scope.overStar = value;
        $scope.percent = (100 * $scope.overStar) / $scope.max;
      };
      $scope.hoveringLeave = function(rate) {
        console.log('hoveringLeave', $scope.rate);
        $scope.percent = (100 * $scope.rate) / $scope.max;
      };
    });

РАБОЧИЙ ДЕМО

person Sajeetharan    schedule 01.01.2018
comment
Ваша Fiddle работает правильно, но когда я использую код в своем проекте, я получаю ошибку ниже angular.min.js: 101 Error: [ngRepeat: dupes]. Я не уверена. - person Rocx; 01.01.2018
comment
нет функции ngrepeat, которую я использую. Кроме того, не видно звезды. Я могу видеть 20 и кнопку отправки. - person Rocx; 02.01.2018
comment
Я обновил вопрос для лучшего понимания. - person Rocx; 02.01.2018