Question

我使用Sandeep Panda的预先输入功能

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

接下来我想从选定的值创建一个可拖动的元素。代码在选择值时调用onItemSelected（）。现在，我如何使用angular来动态地将draggable添加到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();
}});

更新：

目前控制器如下所示：

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实际添加可拖动元素之外，现在元素已经存在并且是指令的控制器（启用/禁用）。但是，在预先输入功能给出一定值后，我仍然无法引用正确的元素。

现在，我执行$ scope.enabled，但这不是特定于元素。虽然该指令选择它并启用/禁用所有可拖动...但我如何设置它以便只有来自typeahead的选定值变为可拖动？

Answer 1

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

您可以创建一个在功能上包装可拖动的指令，并将所选值作为参数，让我们说你的指令是

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

现在，您所要做的就是使用ng-if或ng-show并定义此元素出现的情况。请注意，如果您的＆＃34;指令＆＃34;使用隔离范围，您必须将该指令包装在另一个元素中并将ng-if放在其上。

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

1 个答案: