3

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....

6
  • Is is HTML connected to the WorkspacesCtrl? Commented Jun 8, 2016 at 15:35
  • 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' Commented Jun 8, 2016 at 15:36
  • @theblindprophet No its not - ive edited question to make it more clear Commented Jun 8, 2016 at 15:45
  • @Claies After I enter a value and click of, $scope.form is still empty - have edited question to clarify Commented Jun 8, 2016 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. Commented Jun 8, 2016 at 15:55

2 Answers 2

0

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);

    };

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

Comments

0

$scope.form do not exists, try

ng-modal="formName"

2 Comments

You mean ng-model="formName"? Tried this and still not working
yes, put ng-model="formName" and in the ok method , console.log('in ModalInstanceCtrl and $scope.formName is ', $scope.formName);

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.