咨询为Angular 1.2控制器/模态框添加特定样式的实现方案

嘿，放心啦！AngularJS 1.2里给控制器关联的模态框加特定样式完全是可行的，两种方式都能搞定，我给你详细说说：

方法一：使用外部CSS样式表 #

这是最推荐的方式，维护起来更方便。你只需要给模态框元素添加一个自定义类，然后在CSS文件里写对应的样式就行。

步骤1：编写CSS样式 #

创建或者修改你的CSS文件，添加针对模态框的自定义样式：

/* 给整个模态框容器加样式 */
.custom-modal-container {
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 500px;
  margin: 100px auto 0;
}

/* 模态框头部样式 */
.custom-modal-header {
  font-size: 1.3rem;
  font-weight: 600;
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

/* 模态框内容区样式 */
.custom-modal-body {
  padding: 20px;
  line-height: 1.5;
}

步骤2：给模态框绑定自定义类 #

如果你用的是AngularUI Bootstrap（Angular1.2里最常用的模态框组件），在控制器里调用$modal.open()的时候，通过windowClass参数指定这个自定义类：

angular.module('myApp').controller('MyModalController', function($modal) {
  this.openModal = function() {
    $modal.open({
      templateUrl: 'modal-template.html',
      controller: 'ModalInstanceCtrl',
      windowClass: 'custom-modal-container' // 绑定自定义类
    });
  };
});

如果是你自己手动编写的模态框DOM结构，直接在对应的根元素上加上这个类就行：

<div class="custom-modal-container" ng-controller="MyModalController">
  <!-- 模态框内容 -->
</div>

方法二：使用内联样式（CSS代码放引号里） #

如果只是简单的样式需求，或者不想单独写CSS文件，也可以直接用内联样式，有两种方式：

直接写在HTML的style属性里 #

在模态框的模板元素里直接添加style属性，把CSS代码放在引号内：

<div class="modal-content" style="background-color: #f8f9fa; border-radius: 10px; padding: 20px;">
  <div class="modal-header" style="font-size: 1.3rem; font-weight: 600;">
    模态框标题
  </div>
  <div class="modal-body" style="line-height: 1.5;">
    这里是模态框内容
  </div>
</div>

使用ng-style绑定控制器里的样式对象 #

如果样式需要动态调整，可以在控制器里定义一个样式对象，然后用ng-style指令绑定：

angular.module('myApp').controller('ModalInstanceCtrl', function($scope) {
  $scope.modalInlineStyles = {
    'background-color': '#f8f9fa',
    'border-radius': '10px',
    'padding': '20px'
  };
});

然后在模板里引用：

<div class="modal-content" ng-style="modalInlineStyles">
  <!-- 模态框内容 -->
</div>

总结一下，不管哪种方式，AngularJS 1.2都完全支持，你根据自己的需求选就行啦！

内容的提问来源于stack exchange，提问作者Riz