AngularJS bootstrap modal scope value not displayed

Question

I'm using angular bootstrap modal.

termsText is populated and the scope.productTerms does contain a value. But for some reason when I output {{ productTerms }} inside the modal the value is not being displayed. Why?

js

$scope.openProductTerms = function (termsText) {
    $scope.productTerms = termsText <-- has a value in console.log()
    var modalInstance = $modal.open({
        templateUrl: 'myModalTerms.html',
        controller: ModalInstanceCtrl
});




var ModalInstanceCtrl = function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.dismiss('OK');
    };
};

html

{{ productTerms }} < ==== value shows outside modal


<script type="text/ng-template" id="myModalTerms.html">
    <div class="modal-body">

        {{ productTerms }}  <==== same value does not show insdie modal?

    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
    </div>
</script>

The modal has a new controller and therefore a new scope. This might be helpful egghead.io/lessons/angularjs-sharing-data-between-controllers — user3360944
– user3360944, Commented Mar 19, 2014 at 15:45
You should be able to specify a scope when you open a modal. — Zack Argyle
– Zack Argyle, Commented Mar 19, 2014 at 16:07

ooozguuur · Accepted Answer · 2014-03-19 16:55:58Z

The modal has a new controller and therefore a new scope. services.js

 angular.module('services',[]).
  factory('sharedService', function($rootScope) {
    var sharedService = {};   
    sharedService.value = null;

   sharedService.prepForBroadcast = function(value) {
       this.value = value;
       this.broadcastItem();
   };

   sharedService.broadcastItem = function() {
       $rootScope.$broadcast('shared');
   };

   return sharedService;
 });

controller.js

     $scope.openProductTerms = function (termsText) {
          sharedService.prepForBroadcast(termsText);
       var modalInstance = $modal.open({
       templateUrl: 'myModalTerms.html',
       controller: ModalInstanceCtrl
     });

lastController.js

     var ModalInstanceCtrl = function ($scope, $modalInstance,sharedService) {
        $scope.$on('shared', function() {
    $scope.productTerms = sharedService.value;
    });
       $scope.ok = function () {
          $modalInstance.dismiss('OK');
        };
     };

EnigmaRM · Accepted Answer · 2014-03-19 16:00:58Z

1

Try using {{$parent.productTerms}} within your HTML

From my experience, it seems that the angular bootstrap modal creates a new scope. So by referencing $parent first, you'll be able to get your model's value.

answered Mar 19, 2014 at 16:00

EnigmaRM

7,61211 gold badges48 silver badges74 bronze badges

Collectives™ on Stack Overflow

AngularJS bootstrap modal scope value not displayed

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related