Question

I am trying to create a directive for plupload. To take things one step at a time I first got the file upload working without the use of the directive (controller and std html). I then added the directive and successfully got the html to render out properly. Unfortunately, the plupload binding then broke.

At first glance it seems that the directive is not rendering before the plupload does its binding, however if I add log statements within the code, the directive does return the hash and all html elements do seem to exist within the DOM.

Any ideas on how to make this work?

html

<div ng-controller="ProfilePhotoUploader">
    This does not work
    <uploader url="<%= profile_image_uploader_path %>"></uploader>

    This works
    <div id="profile-image-container">
        <div id="select-file">Select File</div>
        <div id="drop-area">Drop file here</div>
        <button class="button small" ng-click="upload('<%= profile_image_uploader_path %>')">Upload File</button>
    </div>
  </div>

uploader.js

var uploader = angular.module('uploader', []);

uploader.directive('uploader', function () {
alert("in directive");
return  {
    restrict: 'E',
    scope: {
        url:'@'
    },
    templateUrl: "/assets/uploader.html"
}
});

assets/uploader.html

<div id="profile-image-container">
  <div id="select-file">Select File</div>
  <div id="drop-area">Drop file here</div>
  <button class="button small" ng-click="upload('{{url}}')">Upload File</button>
</div>

profile_photo_uploader.js

var ProfilePhotoUploader = function ($scope) {

console.log($("uploader"));
$scope.uploader = new plupload.Uploader({
    runtimes: "html5",
    browse_button: 'select-file',
    max_file_size: '10mb',
    container: "profile-image-container",
    drop_element: "drop-area",
    multipart: true,
    multipart_params : {
        authenticity_token: $('meta[name="csrf-token"]').attr('content'),
        _method: 'PUT'
    },
    filters: [
        {title: "Image Files", extensions: "jpg,jpeg,png"}
    ]
});

$scope.upload = function(url) {
    $scope.uploader.settings.url = url;
    $scope.uploader.start();
};

$scope.uploader.init();
};

Answer 1

Here is a fiddle with two versions of the directive. One does not create a new scope. The other creates an isolate scope. What I found out is that ng-click can’t contain {{}}s, so we need to use a compile function to get the URL string into the template, via the attributes argument (tAttrs).

No new scope. HTML:

<uploader url="http://someplace.com/pic.jpg" upload-fn="upload"></uploader>

Directive:

myApp.directive('uploader', function () {
    return {
        restrict: 'E',
        templateUrl: "/assets/uploader.html",
        compile: function (tElement, tAttrs) {
            var buttonElement = tElement.find('button')
            buttonElement.attr('ng-click', tAttrs.uploadFn + "('" + tAttrs.url + "')")
            console.log(tElement.html())
        }
    }
});

Above, the directive uses the same scope as the controller, so the ng-click attribute’s value is set to call the function defined by the upload-fn attribute in the HTML.

The upload-fn attribute is not necessary, but it does make the directive more reusable, since the directive is told what scope method to call — “upload” — and hence can be easily altered in the HTML. If reusablility is not a concern, here’s the simpler alternative:

HTML:

<uploader url="http://someplace.com/pic.jpg"></uploader>

Directive change:

buttonElement.attr('ng-click', "upload('" + tAttrs.url + "')")

Isolate scope. HTML:

<uploader-isolate url="http://someplace.com/pic.jpg" upload-fn="upload(url)">
</uploader-isolate>

Directive:

myApp.directive('uploaderIsolate', function () {
    return {
        restrict: 'E',
        scope: {
            uploadFn: '&'
        },
        templateUrl: "/assets/uploader.html",
        compile: function (tElement, tAttrs) {
            var buttonElement = tElement.find('button')
            buttonElement.attr('ng-click', "uploadFn({url:'" + tAttrs.url + "'})")
            console.log(tElement.html())
        }
    }
});

Above, the directive creates a new scope — an isolate scope. This scope does not prototypically inherit from the parent/controller scope, so it (and the directive’s template) do not have access to the upload() function defined on the controller’s $scope. The ‘&’ notation is used to create a “delegate” uploadFn function. What that means is that when “uploadFn” is used in the isolate scope (i.e., in the directive’s template), it will actually call the “upload” function on the parent scope.

In addition, we specify that the upload function takes one argument, url. When the delegate function is used in the directive’s template, we can’t just pass an argument. I.e., this won’t work: uploadFn(‘http://…’). Instead, we need to use a map/object to specify any argument values. E.g., uploadFn({url: ‘http://…’}).

The isolate scope object hash does not contain url: '@' because I don’t think attribute ng-click’s value can contain {{}}s. This is why we use a compile function and obtain the url attribute’s value via the compile function’s attribute argument. If the url value was only used elsewhere in the template, such as <span>url = {{url}}</span>, then the ‘@’ notation would be used.

The template was altered to remove the value for the ng-click attribute. The value is assigned to the attribute in the compile function.

<button class="button small" ng-click>Upload File</button>