向控制器/模态添加特定样式

Question

自从我玩过角度以来已经有一段时间了，特别是旧版本(1.2(，但我很确定这可以做到(希望我没有错(。下面是我目前拥有的代码，我只需要为 css 样式表添加一个属性，或者如果我可以将我的 css 包含在引号中，我不在乎这两种方式。

  $scope.callxyz = function() {
        var modalInstance = $modal.open({
            templateUrl : 'views/xyz.html',
            scope       : $scope
          });
        $rootScope.creditCardModal = modalInstance;
  };

Answer 1

如果你想包含影响模态的CSS，它与你要添加到应用中的任何其他CSS没有任何不同：

<!-- include in your page -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
  .modal { 
    /* your styles */ 
   }
</style>

您必须使用正确的选择器，并了解一些用于定位正确组件的模态库。

对于AngularJS中的任何组件来说，情况都是相同的。没有添加CSS的特殊方法。

看起来您正在使用旧版本的Angular UI Bootstrap。它包括允许您修改模态最外层组件的模板。您可以通过检查这些模板来定位 CSS 中的类。

如果您只想将字符串传递给模态控制器，则可以通过解析完成：

var modalInstance = $modal.open({
        templateUrl : 'views/xyz.html',
        scope       : $scope,
        resolve: {
          css: function () {
            return "some CSS as a string";
          }
        }
});

然后，您可以在控制器中将其作为注入的依赖项进行访问：

angular.module('ui.bootstrap.demo')
.controller('ModalInstanceCtrl', function ($uibModalInstance, css) {
  console.log(css)  // "some CSS as a string"
});