Angular 1 Error: [ng:areq] - Controller inside Controller

Question

I'm trying to use angular rating from this http://plnkr.co/edit/kFKejRU0G2wmkD7GlNdH?p=preview

Here is my Angular code:

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

Above code is used for Rating. Here is the html code.

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

As you can see I have nested controller and this is giving me error Error: [ng:areq].

What can be done now? Is there any way I can fix it?

Update

After using the code of saj now I am getting error. angular.min.js:101 Error: [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

No star is vising. I inspect the code and codes are below.

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

if the answer solved the problem you were experiencing when the question was asked, you should accept the answer and then ask a new question (referencing this question, if relevant), rather than modifying the question to ask about a completely different problem. — Claies
– Claies, Commented Jan 2, 2018 at 4:59
Do you use any routes in your application? $state or $route ? — Sameer
– Sameer, Commented Jan 2, 2018 at 5:18

Sajeetharan · Accepted Answer · 2018-01-01 04:40:06Z

1

You just need to separate out 'RatingDemoCtrl' controller

 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;
      };
    });

WORKING DEMO

answered Jan 1, 2018 at 4:40

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Roxx Over a year ago

Your Fiddle working properly but when i use the code in my project then i am getting below error angular.min.js:101 Error: [ngRepeat:dupes]. I am not sure.

Roxx Over a year ago

there is no ngrepeat function I am using. Also, no star is visible. I am able to see 20 and submit button.

Roxx Over a year ago

I have updated the question for better understanding.

Collectives™ on Stack Overflow

Angular 1 Error: [ng:areq] - Controller inside Controller

Update

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

3 Comments

Related