Issues using the API

[ansem78]

I am using the movable plugin and I have to perform an action when I stop dragging a task. The docs say I need to register the API, so I have added api="registerApi" in the div with the gantt directive. And in my controller:

$scope.registerApi = function(api) { api.core.on.ready($scope,function() { api.tasks.on.moveEnd($scope,function(task) { console.log(task); }); }); };

The console doesn't log anything when I drag and release a task. Even if I put console.log('Something'); in the function raised by the ready event, the console doesn't show "Something" when the Gantt is ready. So, how can I register and use the API?

[ldmarz]

I test this code and it's working please check if you have the movable plugin enabled and you are using the same $scope to register the ganttApi

$scope.registerApi = function (api) {
    api.core.on.ready($scope, function () {
      api.tasks.on.moveEnd($scope, function (task) {
        console.log(task)
      })
    })
  }

<div gantt data="data"  api="registerApi">
   <gantt-movable enabled="true" allow-moving="true" allow-resizing="true" allow-row-switching="true">
    </gantt-movable>
</div>

[ansem78]

I checked my code an it's the same as yours. The only differences are:

1. I have only allow-resizing="false" attribute set for the movable plugin (the docs say all attributes are true by default).
2. I have all gantt attribute values in an object ($scope.gantt), except for registerApi that is defined directly as a $scope property.

I tried by adding all supported attributes and by setting all attribute values as $scope properties. The movable plugin works when I drag & drop tasks, but the API seems not working. The console doesn't log any error nor the task I moved. I don't have any isolated scope in my controller.

[ansem78]

I've found the issue. In my controller, I have a piece of code wrapped in a callback function, because I have to set the current user before doing anything else. The user is returned by $http, so I have the $scope.setCurrentUser function that takes the classic 2 callbacks. In the resolve callback, I set $scope.user and all other $scope properties and functions. So, $scope.registerApi is set in this callback. If I move this outside the $scope.setCurrentUser function, the API works. Anyway, I don't understand why all other functions and properties are set correctly and gantt directives can use them, while registerApi doesn't work if I define it in the same place where I define all other $scope variables. Maybe because of the scope of its argument? So, the argument "api" is not visibile if it is not directly used in the controller function?

[ldmarz]

Nice work! As the api parameter is a two-way-binding and is used to give you and api, you don't set a value you give a function to been used as callback so the gantt component must have this function available right away, not inside a callback