定数を使用するとng-repeatが機能しません

Question

新しいAngularJSです。

私は定数からドロップダウンメニューを作る必要があります。 ここに私のコード：次に

.constant('COLORS', 
    [ 
     {red: '#ff0000'}, 
     {green: '#00ff00'}, 
     {blue: '#0000ff'} 
    ] 
).directive('colorSetter', ['COLORS', function (COLORS) { 
    return { 
     scope: { 
      user: "=" 
     }, 
     restrict: 'E', 
     // templateUrl: 'colorSetterDirective.html' 
     template: '<select name="mySelect" ng-model="colorModel">' + 
     '<option ng-repeat="(key,value) in COLORS">{{c.key}} - {{c.value}}</option>' + 
     '</select>' 
    } 

、それはドロップダウンメニューを作成しますが、何のショーがあります。空っぽです。 私はすべてを試しましたが、うまく動作しません。私もその線を使用し、まだ動作していない：

<option ng-repeat="c in COLORS">{{c}}</option> 

PIC： empty selectors

のindex.html：

.... 
<td><color-setter ng-model="colors" user="x"></color-setter></td> 

はみんなありがとう！

編集： app.js

var app = angular.module("testProject", ['ui.router', 'ngAnimate', 'ngSanitize']) 
.service('userService', function ($http) { 
    this.getUsers = function() { 
     return $http.get('users.json'); 
    }; 
}) 
.controller('testProjectCtrl',function ($scope, userService, COLORS) { 
    function GetAllUsers() { 
     var getUsersData = userService.getUsers(); 

     getUsersData.then(function (user) { 
      $scope.users = user.data; 
     }, function() { 
      alert('Error in getting user records'); 
     }); 
    } 

    function init() { 
     $scope.sortType = "username"; 
     $scope.sortReverse = false; 
     $scope.limitNumber = 10; 
     $scope.colors = COLORS; 

    } 

    $scope.setDb = function (darab) { 
     $scope.limitNumber = darab; 
    } 
    init(); 
    GetAllUsers(); 

}).constant('COLORS', 
    [ 
     {red: '#ff0000'}, 
     {green: '#00ff00'}, 
     {blue: '#0000ff'} 
    ] 
).directive('colorSetter', ['COLORS', function (COLORS) { 
    return { 
     scope: { 
      user: "=" 
     }, 
     restrict: 'E', 
     // templateUrl: 'colorSetterDirective.html' 
     template: '<select name="mySelect" ng-model="colorModel">' + 
     '<option ng-repeat="c in COLORS">{{c}}</option>' + 
     '</select>' 
    } 


}]); 

Answer 1

あなたは、コントローラの$スコープで

.directive('colorSetter', ['COLORS', function (COLORS) { 
    return { 
     scope: { 
      user: "=" 
     }, 
     restrict: 'E', 
     templateUrl: 'colorSetterDirective.html', 
     controller:function($scope){ 
      $scope.colors = COLORS; 
     } 
    } 
}]); 

を定数を注入する必要がありcolorSetterDirective.html：

<select name="mySelect" ng-model="colorModel"> 
    <option ng-repeat="c in colors">{{c}}</option> 
</select>