0

I have an interface with a "settings" button that opens a modal window. What I want to do is update scope values from the original controller. For example, in the MainController, i define a "default" theme that is used to control the theme in the body tag.

$scope.theme = 'default';

In the controller, I am updating the value of $scope.theme from an input in the view with something like ng-click"changeTheme(newValue)" .. which updates $scope.theme and furthermore, the body's class is reflected by this value.

<body ng-controller="MainController" ng-class="{midnight: theme == 'midnight'}">

Here is the modal code in that controller

$scope.open = function (settings) {
  $scope.settings = settings;
  $modal.open({
    templateUrl: 'myModalContent.html',
    backdrop: true,
    windowClass: 'modal',
    controller: function ($scope, $modalInstance, settings) {
      $scope.settings = settings;
      $scope.submit = function () {
        $modalInstance.dismiss('cancel');
      }
    },
    resolve: {
      settings: function () {
        return $scope.settings;
      }
    }
  });
};

And in the view ... here's what I have so far.

<script type="text/ng-template" id="myModalContent.html">
  <form ng-submit="submit()">
    <div class="modal-body">
      <label>Label</label>
      <input type="text" ng-model="settings.label" />
      <label>Value</label>
      <input type="text" ng-model="settings.theme" />
    </div>
    <div class="modal-footer">
      <input type="submit" class="btn primary-btn" value="Close" />
    </div>
  </form>
</script>

This example works when sending back anything that is created in this new $scope.settings object. But what I want is for the new settings object to update the $scope.theme from the main controller as well. What am I missing?

2
  • I think people are having trouble understanding your question. Please consider rewording. We are missing the link between theme and settings. I believe you said it was some logic contained within changeTheme() Commented Apr 22, 2014 at 23:13
  • Thank you for your suggestion. In attempting to re-word the question, I managed to find the answer I was looking for! I will post an update. Commented Apr 23, 2014 at 0:28

1 Answer 1

1

The problem was I didn't give UI bootstrap nearly enough attention with their basic example. All I wanted was to find a way for the selection in the modal to update various scope values on the page. I've figured out out by messing with this example:

http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview

My trouble was understanding how to handle multiple variables changing from the modal. This is a very simple fork that illustrates what I was trying to initially understand:

http://plnkr.co/edit/RYNcURKjGhWxUBpUlAkD?p=preview

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.