Angular 1 错误：[ng:areq] - 控制器内的控制器答案

【问题标题】：Angular 1 Error: [ng:areq] - Controller inside ControllerAngular 1 错误：[ng:areq] - 控制器内的控制器
【发布时间】：2018-01-01 04:02:42
【问题描述】：

我正在尝试使用来自 http://plnkr.co/edit/kFKejRU0G2wmkD7GlNdH?p=preview 的角度评分

这是我的 Angular 代码：

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>

【问题讨论】：

你需要分离控制器代码
如果答案解决了您在提出问题时遇到的问题，您应该接受答案，然后提出一个新问题（参考此问题，如果相关），而不是修改要提出的问题关于一个完全不同的问题。
您的应用程序中是否使用了任何路由？ $state 还是 $route ？
@MohamedSameer 不，我没有使用任何东西。
你能发布你的路线吗？ angularjs文件

标签： javascript html angularjs angular-controller

【解决方案1】：

你只需要分离出'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;
      };
    });

WORKING DEMO

【讨论】：

你的小提琴工作正常，但是当我在我的项目中使用代码时，我遇到了错误 angular.min.js:101 错误：[ngRepeat:dupes]。我不确定。
我没有使用 ngrepeat 函数。此外，看不到星星。我可以看到 20 并提交按钮。
我已更新问题以便更好地理解。