保存和取消按钮不起作用

Question

I've created an application in angular js for add and remove popup model, The popup model is coming but on saving i'm getting undefined and cancel is not working .

JSFIDDLE

can anyone please tell me some solution for this

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

app.controller('mainController', function ($scope, $rootScope, $modal, $log) {
    $scope.users = [{
        userId: 1,
        userName: "Jhonny"
    }, {
        userId: 2,
        userName: "Sunny"
    }];

    $scope.selectedUsers = {
        users: []
    };

    $scope.open = function (users, dept) {
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'mainController',
            resolve: {
                usersInModalScope: function () {
                    return users;
                },
                deptInModalScope: function () {
                    return dept;
                }
            }
        });
    };

});


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

commonApp.controller('ModalInstanceCtrl', function ($scope, $rootScope) {
    $scope.cancel = function () {
        $scope.modalInstance.close();
        if ($rootScope.$root.$$phase != '$apply' && $rootScope.$root.$$phase != '$digest') {
            $rootScope.$apply();
        }
    }

    $scope.save = function () {
        alert(JSON.stringify($scope.selectedUsers));
    }
});


commonApp.directive('multiSelect', function ($q) {
    return {
        restrict: 'E',
        controller: "ModalInstanceCtrl",
        require: 'ngModel',
        scope: {
            selectedLabel: "@",
            availableLabel: "@",
            displayAttr: "@",
            available: "=",
            model: "=ngModel",
            eventHandler: '&ngClick'
        },
        template: '<div class="multiSelect">' +
            '<div class="select">' +
            '<label class="control-label" for="multiSelectAvailable">{{ availableLabel }} ' +
            '({{ available.length }})</label>' +
            '<select id="multiSelectAvailable" ng-model="selected.available" multiple ' +
            'ng-options="e as e[displayAttr] for e in available"></select>' +
            '</div>' +
            '<div class="select buttons">' +
            '<button class="btn mover right" ng-click="add()" title="Add selected" ' +
            'ng-disabled="selected.available.length == 0">' +
            '<i class=" icon-arrow-right"></i>' +
            '</button>' +
            '<button class="btn mover left" ng-click="remove()" title="Remove selected" ' +
            'ng-disabled="selected.current.length == 0">' +
            '<i class="icon-arrow-left"></i>' +
            '</button>' +
            '</div>' +
            '<div class="select">' +
            '<label class="control-label" for="multiSelectSelected">{{ selectedLabel }} ' +
            '({{ model.length }})</label>' +
            '<select id="currentRoles" ng-model="selected.current" multiple ' +
            'class="pull-left" ng-options="e as e[displayAttr] for e in model">' +
            '</select>' +
            '</div>' +
            '</div>' +
            '<div class="wrapper text-center">' +
            '<button class="btn btn-default" ng-click="save()"> Save </button>' +
            '<button class="btn btn-default" ng-click="cancel()">Cancel</button>' +
            '</div>',
        link: function (scope, elm, attrs) {
            scope.selected = {
                available: [],
                current: []
            };

            var dataLoading = function (scopeAttr) {
                var loading = $q.defer();
                if (scope[scopeAttr]) {
                    loading.resolve(scope[scopeAttr]);
                } else {
                    scope.$watch(scopeAttr, function (newValue, oldValue) {
                        if (newValue !== undefined) loading.resolve(newValue);
                    });
                }
                return loading.promise;
            };

            var filterOut = function (original, toFilter) {
                var filtered = [];
                angular.forEach(original, function (entity) {
                    var match = false;
                    for (var i = 0; i < toFilter.length; i++) {
                        if (toFilter[i][attrs.displayAttr] == entity[attrs.displayAttr]) {
                            match = true;
                            break;
                        }
                    }
                    if (!match) {
                        filtered.push(entity);
                    }
                });
                return filtered;
            };

            scope.refreshAvailable = function () {
                scope.available = filterOut(scope.available, scope.model);
                scope.selected.available = [];
                scope.selected.current = [];
            };

            scope.add = function () {
                scope.model = scope.model.concat(scope.selected.available);
                scope.refreshAvailable();
            };
            scope.remove = function () {
                scope.available = scope.available.concat(scope.selected.current);
                scope.model = filterOut(scope.model, scope.selected.current);
                scope.refreshAvailable();
            };

            $q.all([dataLoading("model"), dataLoading("available")]).then(function (results) {
                scope.refreshAvailable();
            });
        }
    };

})

Answer 1

I am pretty sure you need to reference the modalInstanceController when you create the modal and not the mainController.

$scope.open = function (users, dept) {
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            resolve: {
                usersInModalScope: function () {
                    return users;
                },
                deptInModalScope: function () {
                    return dept;
                }
            }
        });
    };

And you need to pass you resolutions into the parameters of the controller as well, also the $modalInstance service is where the methods close, dismiss, etc live...

commonApp.controller('ModalInstanceCtrl', function ($scope, $rootScope, $modalInstance, usersInModalScope, deptInModalScope) {
    $scope.cancel = function () {
        $modalInstance.close();
    }

    $scope.save = function () {
        alert(JSON.stringify($scope.selectedUsers));
    }
});

Now having said this I couldnt get your implementation to work the way you want it. But in our implementation of the ui.bootstrap and the modals we use this version.

ProductsCtrl

angular.module('app', ['ui.bootstrap'])

.controller('AppController', function($scope, $modal, $templateCache) {

  $scope.product = { product: 'I am the product' };

  $scope.openEditProductModal = function () {

    var editProductModal = $modal.open({
        templateUrl: 'edit-product.html',
        controller: 'EditProductModalController',
        resolve: {
            product: function () {
                return $scope.product;
            }
        }
    });

    editProductModal.result.then(function (product) {
        $scope.product = product;
    });
  };


})

Modal Controller

.controller('EditProductModalController', function ($scope, $modalInstance, product) {

   $scope.product = product;

   $scope.ok = function () {
            /**
             * Set the edited description and close the modal resolving the promise
             */
            $scope.product = product
            $modalInstance.close($scope.product);
        };

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

    })

HTML

  <body ng-controller="AppController">
      <h1 ng-bind="product.product"></h1>
      <br>
      <button ng-click="openEditProductModal(product.product)">Open Modal</button>
      <br>
      <span ng-bind="product.product"></span>
  </body>

Edit-Product.html

<div class="modal-header">
  <h3><span class="glyphicon glyphicon-edit"></span> Edit Product</h3>
  <span class="subtitle" ng-bind="product.name"></span>
</div>
<div class="modal-body edit-description-modal">
  <div class="row">
    <input ng-model="product.product"/>
  </div>

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

Link to Plunkr

Answer 2

Here

Working Demo $rootScope

Working Demo Factory Version

Problem with controller's scope.mainController and ModalInstanceCtrl have their own scope. it is not same scope instance totally different so here $rootScope is same instance across app.

First working demo I'm using $rootScope variable. Depending on global object really bad design.

To communicate between controllers you need to create factory service like userFactory then pass around your controllers. In factory service keep your modal.

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

app.controller('mainController', function ($scope, $rootScope, $modal, $log, userFactory) {

    $scope.users = userFactory.users;

    $scope.selectedUsers = userFactory.selectedUsers;        

    $scope.open = function (users, dept) {       

        userFactory.modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'mainController',
            resolve: {
                usersInModalScope: function () {
                    return userFactory.users;
                },
                deptInModalScope: function () {
                    return userFactory.dept;
                }
            }
        });
    };

});

app.factory('userFactory', function (){
    return {
        modalInstance:{},
        users : [{
                    userId: 1,
                    userName: "Jhonny"
                 },
                 {
                    userId: 2,
                    userName: "Sunny"
                 }
                ],

        selectedUsers :{users: []},
        dept : [],
    }
});



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

commonApp.controller('ModalInstanceCtrl', function ($scope, $rootScope, userFactory) {

    $scope.cancel = function () {
        userFactory.modalInstance.close();
        if ($rootScope.$root.$$phase != '$apply' && $rootScope.$root.$$phase != '$digest') {
            $rootScope.$apply();
        }
    }

    $scope.save = function () {
        alert(JSON.stringify(userFactory.selectedUsers));
    }
});


commonApp.directive('multiSelect', function ($q) {
    return {
        restrict: 'E',
        controller: "ModalInstanceCtrl",
        require: 'ngModel',
        scope: {
            selectedLabel: "@",
            availableLabel: "@",
            displayAttr: "@",
            available: "=",
            model: "=ngModel",
            eventHandler: '&ngClick'
        },
        template: '<div class="multiSelect">' +
            '<div class="select">' +
            '<label class="control-label" for="multiSelectAvailable">{{ availableLabel }} ' +
            '({{ available.length }})</label>' +
            '<select id="multiSelectAvailable" ng-model="selected.available" multiple ' +
            'ng-options="e as e[displayAttr] for e in available"></select>' +
            '</div>' +
            '<div class="select buttons">' +
            '<button class="btn mover right" ng-click="add()" title="Add selected" ' +
            'ng-disabled="selected.available.length == 0">' +
            '<i class=" icon-arrow-right"></i>' +
            '</button>' +
            '<button class="btn mover left" ng-click="remove()" title="Remove selected" ' +
            'ng-disabled="selected.current.length == 0">' +
            '<i class="icon-arrow-left"></i>' +
            '</button>' +
            '</div>' +
            '<div class="select">' +
            '<label class="control-label" for="multiSelectSelected">{{ selectedLabel }} ' +
            '({{ model.length }})</label>' +
            '<select id="currentRoles" ng-model="selected.current" multiple ' +
            'class="pull-left" ng-options="e as e[displayAttr] for e in model">' +
            '</select>' +
            '</div>' +
            '</div>' +
            '<div class="wrapper text-center">' +
            '<button class="btn btn-default" ng-click="save()"> Save </button>' +
            '<button class="btn btn-default" ng-click="cancel()">Cancel</button>' +
            '</div>',
        link: function (scope, elm, attrs) {
            scope.selected = {
                available: [],
                current: []
            };

            var dataLoading = function (scopeAttr) {
                var loading = $q.defer();
                if (scope[scopeAttr]) {
                    loading.resolve(scope[scopeAttr]);
                } else {
                    scope.$watch(scopeAttr, function (newValue, oldValue) {
                        if (newValue !== undefined) loading.resolve(newValue);
                    });
                }
                return loading.promise;
            };

            var filterOut = function (original, toFilter) {
                var filtered = [];
                angular.forEach(original, function (entity) {
                    var match = false;
                    for (var i = 0; i < toFilter.length; i++) {
                        if (toFilter[i][attrs.displayAttr] == entity[attrs.displayAttr]) {
                            match = true;
                            break;
                        }
                    }
                    if (!match) {
                        filtered.push(entity);
                    }
                });
                return filtered;
            };

            scope.refreshAvailable = function () {
                scope.available = filterOut(scope.available, scope.model);
                scope.selected.available = [];
                scope.selected.current = [];
            };

            scope.add = function () {
                scope.model = scope.model.concat(scope.selected.available);
                scope.refreshAvailable();
            };
            scope.remove = function () {
                scope.available = scope.available.concat(scope.selected.current);
                scope.model = filterOut(scope.model, scope.selected.current);
                scope.refreshAvailable();
            };

            $q.all([dataLoading("model"), dataLoading("available")]).then(function (results) {
                scope.refreshAvailable();
            });
        }
    };
})