Tuesday, 18 November 2014

angular-ui modal window

As the issue mentioned here:

http://stackoverflow.com/questions/18716113/scope-issue-in-angularjs-using-angularui-bootstrap-modal


My explanation and solution are:

It copies all properties of the given scope(if you specify a scope when you open your modal, otherwise it will use the $rootScope by default) to modal's scope. be aware, this is purely value copying, which does not mean reference or pointer. So, when you change the value of them in modal, you will not be able to get the new value from outside(the main page controller) and vice versa. Meantime, it sets the given scope as the parent scope of this new created modal's scope, which can be accessed by $scope.$parent in modal controller.

Of cause resolve can pass extra data from main page controller to modal controller but it is also one way passing, not possible to pass data back.

So, you may found that it is difficulty to control (except closing) the modal window outside(the main page controller). I mean it is tough if you want to call or change something of modal window from your main page or pass a data from modal window to your main page.

However, it is possible to do communicating between them. The solution is by scope, which can by the bridge between these two things.

1. when you are creating your model window by open function $modal.open({ specify a scope for it, the easiest way to do this is pass your current scope and latter modal can directly accesses it. Alternatively if you want make it more safer, you can create a scope by $scope.$new(). then keep the reference of this new scope, which is the bridge between modal and main page controller.

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

    var modalInstance = $modal.open({
                    templateUrl: '/views/xxx.html',
                    controller: 'xxxcontroller',
                    size: 'lg',
                    backdrop : 'static',
                    scope : $scope,
                    resolve: {
                        xxxx: function () {
                          return $scope.xxxx;
                        }
                      }
                  });

<!-- end snippet -->

2. you can access you main page controller's scope by $scope.$parent in modal's controller.

Also be aware that, children scope can inherent properties from parent scope.

No comments:

Post a comment