Angular 1嵌套控制器报[ng:areq]及[ngRepeat:dupes]问题求助

Hey there! Let's work through the issues you're hitting with your nested Angular controllers and rating component. I'll break down each error and give you concrete fixes to get those stars showing up properly.

First: Fixing the Error: [ng:areq] Issue #

This error almost always means Angular can't find or recognize one of your controllers. Since you're nesting RatingDemoCtrl inside getprofile, the most common mistakes here are:

• You didn't register both controllers to your Angular module (you might have defined one inside the other instead of separately)
• A typo in the controller name in your HTML or JS
• Your module isn't properly initialized on the page

Fix: Make sure both controllers are registered to the same module explicitly. For example:

// Initialize your Angular module first
angular.module('yourAppName', [])
  // Parent controller
  .controller('getprofile', function($scope) {
    // Add your parent controller logic here (like fetching profile data)
  })
  // Nested child controller for ratings
  .controller('RatingDemoCtrl', function($scope) {
    // Rating component logic will go here
  });

And in your HTML, ensure you're nesting the ng-controller directives correctly (no typos!):

<div ng-app="yourAppName">
  <div ng-controller="getprofile">
    <!-- Parent controller content (e.g., profile info) -->
    <div ng-controller="RatingDemoCtrl">
      <!-- Your rating component will live here -->
    </div>
  </div>
</div>

Next: Fixing the Error: [ngRepeat:dupes] Issue #

This error pops up when Angular can't tell the items in your ng-repeat apart—usually because you're looping over duplicate values (like an array of [1,2,3,4,5] where numbers repeat if you expand beyond 5, or even just identical values in the array).

Fix: Add track by $index to your ng-repeat directive. This tells Angular to use the array index as the unique identifier for each star. For your rating component, the HTML would look something like:

<div class="rating-container">
  <div 
    ng-repeat="star in stars track by $index" 
    class="star" 
    ng-click="setRating($index + 1)"
    ng-class="{ 'filled': $index < rating }"
  >
    ★
  </div>
</div>

And in your RatingDemoCtrl, make sure you define the stars array and initial rating:

.controller('RatingDemoCtrl', function($scope) {
  // Set initial rating and total number of stars
  $scope.rating = 0;
  $scope.stars = Array(5).fill(0); // Creates an array of 5 empty items (we just need the length)

  // Function to update rating when a star is clicked
  $scope.setRating = function(newRating) {
    $scope.rating = newRating;
  };
});

Using Array(5).fill(0) avoids duplicate numeric values altogether, but adding track by $index is still a safe guard either way.

Why the Stars Aren't Showing Up (And ngRepeat Isn't Rendering) #

If you've fixed the above errors and still don't see stars, it's likely a scope issue:

1. Check if your controller is actually loaded: Use browser dev tools (Elements tab) to make sure the ng-controller="RatingDemoCtrl" element has the ng-scope class applied—if not, the controller isn't being initialized.
2. Verify scope variables exist: Use AngularJS Batarang (a Chrome dev tool extension) to inspect the RatingDemoCtrl scope and confirm $scope.stars and $scope.rating are defined and have values.
3. Ensure no parent scope conflicts: If your parent getprofile controller has a variable named stars or rating, it might be overriding the child controller's values—rename variables if needed to avoid collisions.

Final Working Example Snippet #

Putting it all together, your code should look like this:

JavaScript:

angular.module('profileRatingApp', [])
.controller('getprofile', function($scope) {
  // Example parent controller logic: fetch profile data
  $scope.profile = {
    name: 'John Doe',
    bio: 'Software Developer'
  };
})
.controller('RatingDemoCtrl', function($scope) {
  $scope.rating = 3; // Default rating
  $scope.stars = Array(5).fill(0);

  $scope.setRating = function(newRating) {
    $scope.rating = newRating;
  };
});

HTML:

<div ng-app="profileRatingApp">
  <div ng-controller="getprofile">
    <h2>{{ profile.name }}</h2>
    <p>{{ profile.bio }}</p>
    
    <div ng-controller="RatingDemoCtrl" class="rating">
      <div 
        ng-repeat="star in stars track by $index" 
        class="star" 
        ng-click="setRating($index + 1)"
        ng-class="{ filled: $index < rating }"
      >
        ★
      </div>
      <p>Current Rating: {{ rating }}</p>
    </div>
  </div>
</div>

CSS (to make stars look right):

.rating .star {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
  display: inline-block;
}
.rating .star.filled {
  color: #ffc107;
}

This should resolve both errors and get your rating stars rendering and working as expected.

内容的提问来源于stack exchange，提问作者Roxx