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

如果定义了类属性，则可以设置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 
                });

            };

          }
        };
      }
    ]);

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

2 个答案: