从其他指令调用时，element指令无法在页面上显示

Question

我在draggable指令中调用colors元素指令时遇到问题。当我调用colors指令时，在html中添加“”字符串。我想要一个用颜色数组填充的select元素在控制器中初始化。

这里是html片段

<div ng-controller="ddController" >  
    <div class="row" >
        <div ng-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8]">
            <span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8]"  droppable></span>
        </div>
    </div>
</div>

这是一个控制器

angular.module('dragDrop', ['dragDrop.directives']).controller('ddController', ['$scope' , function($scope){
$scope.colors =  [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
];

}]);

指令

var directives = angular.module('dragDrop.directives', []);

directives.directive('colors', function() {
    return {
        restrict: 'E',
        template: '<select ng-model="color" ng-options="c.name for c in colors">  </select>'
};
})

directives.directive('droppable', function() {

  return {
    $scope: {
      drop: '&' // parent
    },
link: function($scope, element) {
  // again we need the native object
  var el = element[0];           

   el.addEventListener(
    'drop',
    function(e) {
  e.preventDefault();          
      if (e.stopPropagation) e.stopPropagation();

      this.classList.remove('over');

      var item = document.getElementById(e.dataTransfer.getData('Text'));
      this.appendChild(item);     

      // call the drop passed drop function
      $scope.$apply('drop()');

  var ele = angular.element(<span/>);
  angular.element(nextSpan).append('<colors></colors>');

  var drag = angular.element(el);   
  drag.removeClass("lvl-over");

      return false;
    },
    false
  );
}
  }
     });