Question

我熟悉角度js中的一切是如何工作的，但我对角度js中的自定义指令非常新。我正在研究一个库从客户端（角度js）上传文件到亚马逊s3..i已成功上传它但我试图在按钮点击上重新发布指令，我不知道怎么做...请帮助..

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（）函数，并且我想重新渲染我的指令。

Answer 1

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

如何刷新角度js中按钮单击的指令

1 个答案: