Angular UI Bootstrap Modal Form Scope "undefined"

Question

i have a uibootstrap accordion "angular_accordion.html" with a button opening modal "new_project_modal.html", values entered in modal are shown in view "angular_tabel.html" in twitter bootstrap panel with a button to open the same modal "new_project_modal.html", i want to show values in input fields so that the user can edit, but values are not available in scope in controller "modal_new_project.js".

Another thing i dont get is that in "new_project_modal.html", ng-controller="ModalDemoCtrl as modalScope", i have to use ng-model="modalScope.name", ng-model="name" doesnt work, no data binding, no scope in controller, why? when it works like ng-model="something" in other views without the need of "modalScope."?

AngularJS: 1.4.7
UI Bootstrap: 0.14.3

angular_accordion.html:

<div ng-controller="UibAccordionCtrl">

    ......
    .....

            <div ng-controller="ModalDemoCtrl">

                <a href="#" id="project-popover" class="btn btn-default center-block" ng-click="open()"><i class="fa fa-bar-chart-o pull-left" id="test1"></i>Create Project</a>

            </div>

            ............
            .......
</div>

angular_tabel.html:

<div ng-controller="TabsCtrl as tabsController">

    .........

            <div class="panel panel-default" id="outer-panel" ng-repeat="panel in panels">

    .............
    ............
    .........
                        <div ng-controller="ModalDemoCtrl">
                            <button class="btn btn-default" ng-click="editProject(panel.name)"><i class="fa fa-edit"></i></button>
                        </div>

    ........
    .......

</div>

new_project_modal.html:

<div ng-controller="ModalDemoCtrl as modalScope">

    ...............
    .............

                    <form class="form-horizontal">
                        ...........
                                <input type="text" class="form-control" id="userName" placeholder="Name" ng-model="modalScope.name">
                        .......
                    </form>

    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok(modalScope.name)">Create</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>

</div>

modal_new_project.js:

var app = angular.module('modalNewProjectModule', ['ui.bootstrap']);

app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

    $scope.open = function () {

        var modalInstance = $uibModal.open({
            templateUrl: 'partials/new_project_modal.html',
            controller: 'ModalInstanceCtrl',
            scope: $scope,
            windowClass: 'test-modal-width',
            backdrop: false,
            resolve: {
                projectName: function () {
                    return $scope.name;
                }
            }
        });
    };

    $scope.editProject = function (name) {
        var modalInstance = $uibModal.open({
            templateUrl: 'partials/new_project_modal.html',
            controller: 'EditModalInstanceCtrl',
            scope: $scope,
            windowClass: 'test-modal-width',
            backdrop: false,
            resolve: {
                projectName: function(){
                    return name;
                }
            }
        });
    };
});

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, projectName, NewProjectService) {
    $scope.ok = function(projectName) {

        var new_project_params = {
            'name': projectName,
            'status': 'Status New'
        };

        NewProjectService.setValue(new_project_params);

        $uibModalInstance.close();

    };

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

app.controller('EditModalInstanceCtrl', function ($scope, $uibModalInstance, projectName, NewProjectService) {

    $scope.name = projectName;              //undefined

    $scope.ok = function(project) {

        var new_project_params = {
            'name': projectName,
            'status': 'Status New'
        };

        NewProjectService.setValue(new_project_params);

        $uibModalInstance.close();

    };

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

Answer 1

As for your code, it is a little hard to follow and I think some of it might not be there. The function calls don't seem to be with the controllers that house them. So I wont be much help for the practical aspect of your question. If you want to create a plunker I'll update this answer and take another stab at your code and specific problem.

As for knowing more about the Controller As syntax (the second part of your question) this might be of use to you because I think you might be using the wrong version of scope in a couple places.

---

If you use the standard controller naming like this:

<div ng-controller="SampleController">
    <span ng-bind="name"></span>
</div>

then the controller would be setup like this:

app.controller('ModalInstanceCtrl', function ($scope) {
    $scope.name = "namegoeshere"; 

---

If you use Controller As syntax then the same would look like:

<div ng-controller="SampleController as ctrl">
    <span ng-bind="ctrl.name"></span>
</div>

then the controller would be like this:

app.controller('ModalInstanceCtrl', function ($scope) {
    var self = this;
    self.name = "namegoeshere"; 

---

Common use cases are when you have nested views with different controllers and each has a "$scope.name" on it, but they have different values. Which one belongs to which scope? When I was trying to wrap my head around it, I found this blog post very useful.

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

Answer 2

OK so mainly there were two reasons.

1) Lack of understanding about changes in Angular controller definition "Controller As" and ($scope VS this). (Documentation still doesn't show examples with their own recommended approach "Controller As")

2) Confusion between modal instance controller and modal html template's controller, that is, modal's controller is only what's defined in $uibModal.open({...}) and is not needed in modal's template.

new_project_modal.html: (BEFORE)

<div ng-controller="ModalDemoCtrl as modalScope">
..........
.....
<input type="text" class="form-control" ng-model="modalScope.projectname">

new_project_modal.html: (AFTER)

<div>
..........
.....
<input type="text" class="form-control" ng-model="modalScope.projectname">

modal_new_project.js: (BEFORE)

..........
....
.


    $scope.open = function () {

        var modalInstance = $uibModal.open({
            templateUrl: 'partials/new_project_modal.html',
            controller: 'ModalInstanceCtrl',
            scope: $scope,
            resolve: {
                projectName: function () {
                    return $scope.projectname;
                }
            }
        });
    };

    .....
    ......
    .......

modal_new_project.js: (AFTER)

..........
..........
.

    var vm = this;

    vm.open = function () {

        var modalInstance = $uibModal.open({
            templateUrl: 'partials/new_project_modal.html',
            controller: 'ModalInstanceCtrl',
            controllerAs: 'modalScope',
            resolve: {
                projectName: function () {
                    return vm.projectname;
                }
            }
        });
    };

    .....
    ......
    .......