如何在角度js上按钮单击refesh指令

我熟悉角度js中的所有操作，但我对角度js中的自定义指令非常陌生。我正在从图书馆上传文件到客户端（角度js）到亚马逊s3 ..我已经成功上传了它，但我试图重新点击按钮上的指令，我不知道哦，怎么做...请帮助..如何在角度js上按钮单击refesh指令

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>" 
); 


}]);

当我点击，它是由指令模板返回“更改”按钮，EMPTYFILE（）函数被调用，并在那里，我想重新渲染我的指令。

来源

2014-12-04 Tiffany

如果你希望别人帮你调试的东西，我建议你尝试尽可能多的，你可以复制和隔离问题减少你的代码。这与S3上传真正相关吗？与模拟'$ timout'一样吗？帮助我们帮助你。 :) – 2014-12-04 07:27:18

我已经删除了不必要的代码。我的问题是无关的上传到S3。它是关于如何重新呈现/刷新指令模板，当我点击一个按钮，从代码中触发'emptyfile（）'功能。我意思是我应该在emptyfile（）函数中写什么来刷新我的指令模板。我在网上搜索了searchrd，但是找不到合适的解决方案 – Tiffany 2014-12-04 07:45:30

“重新渲染”是什么意思？点击这个按钮后你想要发生什么？ – 2014-12-04 08:14:09

当您单击按钮时，您的代码将进入摘要循环。如果你的代码已经调用了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}}"....

来源

2014-12-04 10:26:04 Carl

如何在角度js上按钮单击refesh指令

回答

相关问题