Javascript 在控制器内动态添加元素

我使用Sandeep Panda的typeahead功能

接下来，我想从所选的值创建一个可拖动的元素。 选择该值时，将选择该代码。 现在，我如何使用angular动态地将draggable添加到DOM中？ 如下所示的jQuery工作得很好，但我希望尽可能多地使用angular

App.controller('TypeAheadController',function($scope,dataFactory){
dataFactory.get('states.json').then(function(data){
    $scope.items=data;
});
$scope.name="";
$scope.onItemSelected=function(){
    console.log('selected='+$scope.name);
    //CREATE NEW DRAGGABLE ELEMENT
    //Currently jquery is used for adding the element and make it draggable
    $('body').append("<div id='state' class='btn-draggable'>"+$scope.name+"</div>");
    $('#state').draggable();
}}); 

指令如下所示：

App.controller('TypeAheadController',function($scope){

$scope.items = [
{name: 'Jan', id: 0, reject: true},
{name: 'Piet', id: 1},
{name: 'Klaas', id: 2},
{name: 'Henk', id: 3 }
];

$scope.name="";
$scope.onItemSelected=function(){
    $scope.enabled = true;
}});

App.directive('draggable', function() {
return {
restrict:'A',
link: function(scope, element, attrs) {
    element.draggable();

    scope.$watch('enabled', function (val) {
    element.draggable(val === true ? 'enable' : 'disable');
    });
}

}}

及分区办事处：

<div id='draggable-{{item.id}}' class='btn-draggable' ng-repeat="item in items" enabled="false" draggable>{{items.name}}</div>

因此，代替jQuery实际添加draggable元素，现在该元素已经存在，并且由指令启用/禁用。但是，在typeahead功能给出某个值之后，我仍然很难引用正确的元素

---

现在，我使用$scope.enabled，但这不是特定于元素的。尽管指令会将其拾取并启用/禁用所有拖动功能。。。如何设置它，以便只有从typeahead中选择的值成为可拖动的？

您不应该像使用jQuery时那样手动修改DOM

您可以创建一个指令，该指令在功能上包装draggable，并将所选值作为参数，假设您的指令是

<my-draggable value="value"></my-draggable>

---

现在，您所要做的就是使用ng if或ng show并定义此元素在哪些情况下出现。请注意，如果您的指令使用一个独立的作用域，您必须将该指令包装在另一个元素中，并在其上添加ng if

谢谢，但我相信您的指令示例的代码丢失了？