Директива, создающая новые директивы с собственным объемом

Question

У меня есть директива, которая содержит три кнопки. Если я ударил один, он должен создать новый экземпляр директивы с собственной областью.

Эта новая директива должна содержать заголовок, который задан параметром предыдущей кнопки.

ng-click="add('blue'); 

Так директива имеет изолированный объем, установленный:

scope: {}, 
restrict: 'E', 
templateUrl: 'xyz.html' 

и ссылку внутри DDO:

controller: function($scope) { 
    $scope.colorTypes = { 
    "red" : true, 
    "green" : false, 
    "blue" : false 
    } 
} 
link: function(scope, element, attrs) { 
    scope.add = function(color){ 
    colorTypes = { 
     "red": false, 
     "green": false, 
     "blue": false 
    } 
    colorTypes[color] = true; 
    var el = $compile('<my-directive myColor='colorTypes'></my-directive>')(scope); 
    element.parent().append(el); 
    } 
} 

Как я могу получить значение (новый цвет) в $ компилировать новую директиву?

Answer 1

Вы делаете почти все правильно, кроме передачи значения :)

Вы можете сделать манипуляции со строками, прежде чем добавить фактическую строку переменной color.

Или (я думаю, более элегантно), вы можете просто создать элемент и добавить атрибут:

link: function(scope, element) { 
    scope.add = function(colorType) { 
    var colorTypes = { 
     "green": false, 
     "red": false, 
     "blue": false 
    }; 
    colorTypes[colorType] = true; 

    var newElem = angular.element("<my-colors>"); 

    var childScope = scope.$new(false); // create a child scope for the directive 
    childScope.colorTypes = colorTypes; 

    $compile(newElem)(childScope); 

    element.parent().append(newElem); 
    } 
} 

Answer 2

Не уверен, что именно о вашей желаемой конечной точке, но это показывает, как использовать значение:

scope: { 
    myColor: "=" 
}, 
link: function(scope, element, attrs) { 
     scope.addDirective = function(color){ 
     var el = $compile('<my-directive myColor=\'{{color}}\'></my-directive>')(scope); 
     element.parent().append(el); 
     } 
} 

Уведомления вы должны иметь myColor в объеме, так как директива ожидает его.

Fiddle