Javascript 使用属性从指令返回承诺

我想在打开模态形式的指令中放置一个promise属性

正如您所知，promise属性有一个“please wait”微调器，直到httpost调用返回

加成 js 我在模态表格中输入了以下内容：

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

我收到了错误消息“viewmodel未定义”，这很有意义。但是，我不知道如何在指令中执行它

有人能告诉我如何实现这一点吗？

在指令上创建和调用表达式属性 向HTML添加表达式属性

<div class="btn-group" role="group" cg-busy="{promise:downloadCtrl.promise}">
    <button type="button" class="btn btn-default"
            file-download
            download-on-click="downloadCtrl.promise = $promise"
            download-url={{downloadCtrl.attributes.url}}>
        Download files
    </button>
</div>

downloadOnClickFn

函数使用两个参数：

context

和

locals

。将上下文设置为作用域，并将局部变量设置为

{$promise:promise}

。这将在作用域的上下文中执行属性表达式，并将本地承诺公开为

$promise

常见的约定是公开带有前缀

$

的本地指令变量，以区别于范围变量

有关

$parse

的更多信息，请参阅

弃用通知书

$http

旧承诺方法

.success

和

.error

已被弃用。使用标准的

。然后改用
方法

错误说明了一切。您需要将指令中的viewModel替换为scope。。。和
cg busy=“{promise:promise}”
谢谢，效果很好：）我已经将您的代码放在我的指令中，但在最后一行，我得到了以下错误：对象不支持行的属性或方法“assign”：downloadOnClickFn.assign（scope.$parent，{$promise:promise}）；检查我的更新。由于指令没有作用域，因此不需要$parent。
assign
函数不是必需的，我添加了
$apply（）
。
<div class="btn-group" role="group" cg-busy="{promise:downloadCtrl.promise}">
    <button type="button" class="btn btn-default"
            file-download
            download-type={{downloadCtrl.attributes.downloadType}}
            download-id={{downloadCtrl.attributes.downloadId}}>
        Download files
    </button>
</div>

.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 +
                          '&' + '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);
                    }
                });
            });
        }
    };
}])

<div class="btn-group" role="group" cg-busy="{promise:downloadCtrl.promise}">
    <button type="button" class="btn btn-default"
            file-download
            download-on-click="downloadCtrl.promise = $promise"
            download-url={{downloadCtrl.attributes.url}}>
        Download files
    </button>
</div>

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

        link: function (scope, element, attrs, controller)
        {
            //Parse download-on-click attribute
            var downloadOnClickFn = $parse(attrs.downloadOnClick);                
            element.on('click', function ()
            {
                var ajaxUrl = attrs.downloadUrl;
                //save promise
                var promise = $http.post(ajaxUrl, {
                    headers: { "Content-Type": undefined }
                })
                .then (function onFullfilled(response)
                {
                    console.log("Http post status = ", response.status); 
                    //return response for chaining
                    return response;
                });
                //Invoke expression
                downloadOnClickFn(scope, {$promise:promise});
                scope.$apply();
            });
        }
    };
}])