Angular drop from external source

My angular app needs to accept text removed from an external source ... text document, web page, etc. (Similar to dropping in a text box). I haven't been able to find anything so far that accepts data from outside the browser, only modules like ngDraggable that allow UI elements to be dragged but don't seem to accept data from the outside. ngDraggable is the only one I've tried, but I've checked demos of several other modules and none of them accepted external data.

I want the frame to trigger an event that will open the modal text and place the deferred text in the textbox in the modal form. The desired behavior can be simulated into this layout by clicking the plus sign in the middle of the form.

If I can get help up to the point where the event is fired and the transition data is available in a variable, then I believe I can do the rest.

app.js:

'use strict';

/**
 * @ngdoc overview
 * @name producerApp
 * @description
 * # producerApp
 *
 * Main module of the application.
 */
angular
  .module('producerApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngDraggable'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

      

main.html

<div class="container">
Container
<hr />
<div ng-drop="true" ng-drop-success="onDropComplete($data,$event)" >
  Drop area
</div>
</div>

      

main.js:

'use strict';

/**
 * @ngdoc function
 * @name producerApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the producerApp
 */
angular.module('producerApp')
  .controller('MainCtrl', function ($scope) {
    $scope.onDragComplete=function(data,evt){
       console.log("drag success, data:", data);
    }
    $scope.onDropComplete=function(data,evt){
        console.log("drop success, data:", data);
    }
 });

      

+3


source to share





All Articles