Javascript 如何在angular js中的按钮单击上引用指令

我熟悉angular js中的一切工作方式，但我对angular js中的自定义指令非常陌生。我正在开发一个库，将文件从客户端（angular js）上传到amazon s3。我已经成功地上传了它，但我正在尝试在点击按钮时重新提交指令，我不知道如何做…请帮助

angular.module('ngS3upload.directives', []).
  directive('s3Upload', ['$parse', 'S3Uploader', 'ngS3Config', function ($parse, S3Uploader, ngS3Config) {
    return {
      restrict: 'AC',
      require: '?ngModel',
      replace: true,
      transclude: true,
      scope: true,
      controller: ['$scope', '$element', '$attrs', '$transclude', function ($scope, $element, $attrs, $transclude) {

        $scope.emptyfile=function()
            {
            alert("hello");
            $scope.$apply();


            }; 
      }],
      compile: function (element, attr, linker) {
        return {
          pre: function ($scope, $element, $attr) {
            if (angular.isUndefined($attr.bucket)) {
              throw Error('bucket is a mandatory attribute');
            }
          },
          post: function (scope, element, attrs, ngModel) {
            // Build the opts array
            var opts = angular.extend({}, scope.$eval(attrs.s3UploadOptions || attrs.options));
            opts = angular.extend({
              submitOnChange: true,
              getOptionsUri: '/s3options',
              acl: 'public-read',
              uploadingKey: 'uploading',
              folder: '',
              enableValidation: true,
              targetFilename: null
            }, opts);


            {{ some code here}}

          }
        };
      },
      templateUrl: function(elm, attrs) {
        var theme = attrs.theme || ngS3Config.theme;
        return 'theme/' + theme + '.html';
      }
    };
  }]);
angular.module('ngS3upload').run(['$templateCache', function($templateCache) {
  'use strict';

  $templateCache.put('theme/bootstrap2.html',
    "<div class=\"upload-wrap\">\n" +  
    " <button class=\"btn btn-primary\" type=\"button\" ng-hide=\"filename\"><span ng-if=\"!filename\">Choose file</span></button>\n" +"<div id=\"imgdiv\" class=\"pindiv\" style=\"position: relative\" ng-if=\"filename\"><audio controls><source src=\"{{filename}}\" type=\"audio/ogg\"><source src=\"{{filename}}\" type=\"audio/mpeg\"></audio><a href=\"\" value=\"change\" ng-click=\"emptyfile()\">Change</a></div>"+
    "<p></p><div class=\"progress\" ng-show=\"uploading\">\n"+"<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"{{progress}}\" aria-valuemin=\"2\" aria-valuemax=\"100\" style=\"width: {{progress}}%;\">\n"+"{{progress}}%"+" </div></div>\n"+
    "  <input type=\"file\" style=\"display: none\"/>\n"+
    "</div>"
  );


}]);

angular.module（'ngS3upload.directives'，[]）。
指令（'s3Upload'，['$parse'，'S3Uploader'，'ngS3Config'，函数（$parse，S3Uploader，ngS3Config）{
返回{
限制：“AC”，
要求：“？ngModel”，
替换：正确，
是的，
范围：正确，
控制器：['$scope'，'$element'，'$attrs'，'$transclude'，函数（$scope，$element，$attrs，$transclude）{
$scope.emptyfile=函数（）
{
警惕（“你好”）；
$scope.$apply（）；
}; 
}],
编译：函数（元素、属性、链接器）{
返回{
前置：函数（$scope、$element、$attr）{
如果（角度未定义（$attr.bucket））{
抛出错误（“bucket是一个强制属性”）；
}
},
职位：职能（范围、要素、属性、模型）{
//构建opts数组
var opts=angular.extend（{}，scope.$eval（attrs.s3UploadOptions | | attrs.options））；
opts=angular.extend({
变化：是的，
GetOptions URI:“/s3options”，
acl:“公共读取”，
uploadingKey:“正在上载”，
文件夹：“”，
enableValidation:true，
targetFilename:空
}，opts）；
{{这里有些代码}}
}
};
},
templateUrl:函数（elm、ATTR）{
var theme=attrs.theme | | ngS3Config.theme；
返回'theme/'+theme+'.html'；
}
};
}]);
角度.module（'ngS3upload'）。运行（['$templateCache'，函数（$templateCache）{
"严格使用",；
$templateCache.put（'theme/bootstrap2.html'，
“\n”+
“选择文件\n”+“”+
\n“+”\n“+”{{progress}}%“+”\n”+
“\n”+
""
);
}]);

---

当我单击指令模板返回的“更改”按钮时，会调用emptyfile（）函数，我想在那里重新呈现我的指令。

单击该按钮时，代码将进入摘要循环。如果您的代码已经调用了emptyFile（）函数（我从您的问题中假设一切正常），并且您希望它显示指令中的更改，只需使指令中的元素动态即可

您可以应用样式，或者使用{{foo}}隐藏/显示元素，其中foo是范围变量

$scope.foo = 'visible'

 $scope.emptyfile=function() {
        $scope.foo = 'hidden';
        // may be needed in case emtyfile is not part of digest cycle
        $scope.$apply()
 }

在你的庙里：

<div style="{{foo}}"....

---

如果您希望人们帮助您调试某些东西，我建议您尽量减少代码，以重现和隔离问题。这真的与S3上传有关吗？模拟
$timout
是否也可以使用同样的方法？帮助我们帮助你。：）我已经删除了不必要的代码。我的问题与上载到s3无关。问题是当我单击从代码中触发“emptyfile（）”函数的按钮时，如何重新呈现/刷新指令模板。我的意思是我应该在emptyfile（）中写什么函数刷新我的指令模板..我在internet上有searchrd，但找不到合适的解决方案“重新渲染”是什么意思？单击此按钮后，您希望发生什么？