Returning a Promise from a Directive Using an Attribute
<p>I want to place a promise attribute in a directive that opens up a modal form.</p>

<p>As you know, the promise attribute has a "please wait" spinner until the httpost call is returned.</p>

<h2>markup</h2>

<pre><code>cg-busy="{promise:downloadCtrl.promise}
</code></pre>

<h2>js</h2>

<pre><code>viewModel.promise = $http.post(ajaxUrl, { searchCriteria: searchValues })
</code></pre>

<p>I entered the following on my modal form:</p>

<pre><code>&lt;div class="btn-group" role="group" cg-busy="{promise:downloadCtrl.promise}"&gt;
    &lt;button type="button" class="btn btn-default"
            file-download
            download-type={{downloadCtrl.attributes.downloadType}}
            download-id={{downloadCtrl.attributes.downloadId}}&gt;
        Download files
    &lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>I entered the following in the associated directive:</p>

<pre><code>.directive('fileDownload', ['$http', '$parse', function ($http, $parse)
{
    return {
        restrict: 'A',

        link: function (scope, element, attrs, controller)
        {
            //for testing purpose. need to be removed.
            console.log('download type on file download directive: ' + attrs.downloadType)
            console.log('download id on file download directive: ' + attrs.downloadId)

            element.bind('click', function ()
            {
                ajaxUrl = root + 'FileUpload/download?' +
                          'ExternalDocumentID=' + attrs.downloadType +
                          '&amp;' + 'FileID=' + attrs.downloadId;
                viewModel.promise = $http.post(ajaxUrl, {
                    headers: { "Content-Type": undefined }
                })
                .success(function (status)
                {
                    if (status.Succeed)
                    {
                        alert('Files Downloaded successfully.');
                    }
                    else
                    {
                        alert(status.Err);
                    }
                });
            });
        }
    };
}])
</code></pre>

<p>I got the error message "viewmodel is not defined" which makes sense. However, I don't know how to do it inside the directive. </p>

<p>Can someone please inform me how I can accomplish this?</p>