角add元素動態內部控制器

http://www.sitepoint.com/creating-a-typeahead-widget-with-angularjs/

接着我想從所選擇的值，一個可拖動的元素創建。該代碼在選擇該值時調用onItemSelected（）。現在，我該如何使用angular動態添加可拖動到DOM？ jQuery（如下所示）工作得很好，但我想盡可能使用角度。

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(); 
}});

UPDATE：

目前控制器看起來是這樣的：

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：

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

所以在jQuery的實際添加拖動元素代替，現在的元素已經存在，並且是由指令控制器（啓用/禁用）。然而，在typeahead功能給出一定的值之後，我仍然無法引用正確的元素。

現在，我做$ scope.enabled，但這不是特定的元素。雖然該指令會提取它並啓用/禁用所有可拖動的...我如何設置它以便只有typeahead中的選定值變成可拖動的？

來源

2014-10-19 Ray

您不應像使用jQuery一樣手動修改DOM。

您可以創建一個包裝可拖動的功能和需要作爲參數的選定值指令，讓我們說你的指令是

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

現在，所有你需要做的就是用ng-if或ng-show並在其中定義這個元素出現的情況。請注意，如果您的「指令」使用隔離範圍，則必須將該指令包裝在另一個元素中，並將其放入ng-if。

來源

2014-10-19 21:37:44

謝謝，但我相信您的指令示例的代碼丟失？ – Ray 2014-10-19 23:06:51

角add元素動態內部控制器

回答

相關問題