adding specific style to a controller/modal

Riz Source

Its been a while since I have played around with angular, specially an older version (1.2) but Im pretty sure this can be done ( hope i'm not wrong ) . Below is the code I have currently, I just need to add a property for css stylesheet, or if I can include my css within quotes, i dont care either way.

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

Answers

answered 3 months ago Pop-A-Stash #1

If you want to include CSS that effects the modal, it's not any different than any other CSS that you would add to your app:

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

You must use proper selectors and know a bit about the modal library you are using to target the right components.

This is the same story for any component in AngularJS. There is no special way of adding CSS.

It looks like you are using and older version of Angular UI Bootstrap. It includes templates that allow you to modify the outermost components of the modal. You can target classes in your CSS by examining those templates.

If you are just wanting to pass a string along to the modal controller, that is accomplished with resolves:

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

And then you access it in your controller as an injected dependency:

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

comments powered by Disqus