Angular modal controller scope

Question

Im having problems with the scope for a modal. Im using the Angular Bootstap library to show the modal. My code is:

angular.module('myApp.workspaces')

.controller('ModalInstanceCtrl', function ModalInstanceCtrl($scope) {

    $scope.ok = function() {

        console.log('in ModalInstanceCtrl and $scope.form is ', $scope.form);

    };

})


.controller('WorkspacesCtrl', function WorkspacesController(workspacesService, $scope, $location, $modal) {

    $scope.uploading = false;
    $scope.noWorkspaces = false;
    $scope.myWorkspaces = [];

    $scope.showModal = function() {

        $scope.opts = {
            backdrop: true,
            backdropClick: true,
            dialogFade: false,
            keyboard: true,
            templateUrl: 'assets/workspaces/modalContent.html',
            controller: 'ModalInstanceCtrl',
            resolve: {}, // empty storage
            scope: $scope
        };


        $modal.open($scope.opts);

    };
});

And modalContent.html is:

<div class="modal-header">
  <h1>Workspace Name</h1>
</div>
<div class="modal-body">


    <form>
        <fieldset>
            <label for="name">Workspace Name:</label>
            <input type="text" name="name" ng-model="form.name" />           
        </fieldset>
    </form>

</div>

<div class="modal-footer">

    <div ng-model="test">hjhhhjsad</div>

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

    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

When I open the modal and then click OK,the console output is:

in ModalInstanceCtrl and $scope.form is undefined

I've tried every solution provided in a previous question here. Including:

passing scope: $scope as an option to the modal
changing ng-model="name" to ng-model="form.name"
changing ng-model="name" to ng-model="$parent.name"

However I still cannot get access to the inout value. What am I doing wrong?

EDIT I realised I can access the input value with

$scope.$$childHead.$$childHead.form.name

This clearly doesnt seem right though....

You can't access the value *where*? there is no `$scope.form` defined, so until you enter a value in the input box, it won't exist. Once you do enter a value, a `$scope.form.name` variable will be dynamically created in the current controller managing that HTML element, which in this case would be `'ModalInstanceCtrl'` — Claies, Jun 08 '16 at 15:36
@theblindprophet No its not - ive edited question to make it more clear — Mark, Jun 08 '16 at 15:45
@Claies After I enter a value and click of, $scope.form is still empty - have edited question to clarify — Mark, Jun 08 '16 at 15:46
what library is `$modal`? I was going to create a plunker to try to recreate your issue, but I'm not sure which library you are referencing; Since this appears to be an issue surrounding that particular library, I want to make sure we are using the same file and version. — Claies, Jun 08 '16 at 15:55
@Claies its from angular bootstrap https://angular-ui.github.io/bootstrap/. Will update question — Mark, Jun 08 '16 at 15:57

Karim · Answer 1 · 2016-06-08T16:24:31.683

0

$scope.form do not exists, try

ng-modal="formName"

edited Jun 08 '16 at 16:24

answered Jun 08 '16 at 15:35

Karim

8,454
3
25
33

You mean ng-model="formName"? Tried this and still not working – Mark Jun 08 '16 at 15:46
yes, put ng-model="formName" and in the ok method , console.log('in ModalInstanceCtrl and $scope.formName is ', $scope.formName); – Karim Jun 08 '16 at 16:22

score 0 · Accepted Answer · answered Jun 08 '16 at 17:08

It seems you are only missing the $scope variable.

.controller('ModalInstanceCtrl', function ModalInstanceCtrl($scope) {

    $scope.form = {
        name: "";
    };

    $scope.ok = function() {

        console.log('in ModalInstanceCtrl and $scope.form is ', $scope.form);

    };

})

Angular modal controller scope

2 Answers2