如何在AngularJS指令中设置CSS类，如果未设置则默认设置？

Question

我创建了一个自定义指令，该指令创建了一个“上传按钮”。 它具有应用了引导按钮CSS的方式，如下所示：

<div class="btn btn-primary btn-upload" ng-click="openModal()">
  <i class="fa fa-upload"></i> Upload
</div>

如果未指定覆盖，如何覆盖CSS类并默认为btn btn-primary btn-upload ？ 目标是在整个应用程序中重用相同的指令，但是在某些地方它是一个按钮，而在其他地方它只是一个基本的未样式化链接。

我的指令如下所示：

'use strict';

    angular.module('documents').directive('documentUpload', ['$timeout', '$translate', '$q', '$docs',
      function ($timeout, $translate, $q, $docs) {
        return {
          restrict: 'E',
          scope: {
            text: '@',
            refId: '@',
            refType: '@',
            documents: '='
          },
          templateUrl: 'modules/documents/views/directives/document-upload.html',
          controller: function ($scope, $element) {

            // override css somewhere here?

            $scope.openModal = function() {

              $docs
                .openModal({ 
                  documents: $scope.documents,
                  refId: $scope.refId,
                  refType: $scope.refType
                })
                .result.then(function (result) {
                  // TODO 
                });

            };

          }
        };
      }
    ]);

Answer 1

这样的事情可能会起作用：

<div class="{{ btnClass || 'btn btn-primary btn-upload'}}" ng-click="openModal()">
  <i class="fa fa-upload"></i> Upload
</div>

然后该指令：

angular.module('documents').directive('documentUpload', ['$timeout', '$translate', '$q', '$docs',
  function ($timeout, $translate, $q, $docs) {
    return {
      restrict: 'E',
      scope: {
        text: '@',
        refId: '@',
        refType: '@',
        documents: '=',
        btnClass: '=' //** new attribute here
      },
      templateUrl: 'modules/documents/views/directives/document-upload.html',
      controller: function ($scope, $element) {

        $scope.openModal = function() {

          $docs
            .openModal({ 
              documents: $scope.documents,
              refId: $scope.refId,
              refType: $scope.refType
            })
            .result.then(function (result) {
              // TODO 
            });

        };

      }
    };
  }
]);

这是一个简化的示例： http : //jsbin.com/qosiquteli/edit?html,js,output

Answer 2

如果定义了class属性，则可以设置div类：

 angular.module('documents').directive('documentUpload', ['$timeout', '$translate', '$q', '$docs',
      function ($timeout, $translate, $q, $docs) {
        return {
          restrict: 'E',
          scope: {
            text: '@',
            refId: '@',
            refType: '@',
            documents: '='
          },
          templateUrl: 'modules/documents/views/directives/document-upload.html',
          link: function (scope, iElement, iAttrs){
             if (iAttrs.class) {
                iElement.find("div").first().attr("class", iAttrs.class);
             }
           },
          controller: function ($scope, $element) {

            // override css somewhere here?

            $scope.openModal = function() {

              $docs
                .openModal({ 
                  documents: $scope.documents,
                  refId: $scope.refId,
                  refType: $scope.refType
                })
                .result.then(function (result) {
                  // TODO 
                });

            };

          }
        };
      }
    ]);