css - 向 Controller /模式添加特定样式

Question

我已经有一段时间没有玩过 angular 了，特别是旧版本 (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 中的类。

如果您只是想将一个字符串传递给模态 Controller ，可以使用 resolves 来完成。 :

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

然后您在 Controller 中将其作为注入(inject)的依赖项进行访问:

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