uttejh uttejh - 3 months ago 15
AngularJS Question

AngularUI Modal controller error

This is the first time I tried AngularUI Modal.

There is a constant error:

controller as vm
is not a function, got undefined.

Here is my Partial:

<div class="container" ng-controller="controller as vm">
<script type="text/ng-template" id="hello.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
hello
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="vm.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="vm.cancel()">Cancel</button>
</div>
</script>

<button type="button" class="btn btn-default" ng-click="vm.open()">Open me!</button>


Controller:

app.controller('controller',[function($uibModal,$log)
{
var vm = this;
vm.animationsEnabled = true;

vm.open = function () {
var modalInstance = $uibModal.open({
animation: vm.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'hello.html',
controller: 'Modalcontroller',
//controllerAs: 'vm',


})
};
}]);


app.js

var app=angular.module("myapp",['ui.router', 'ui.bootstrap']);

...

.state("user", {
url: "/user",
views: {
"main": {
templateUrl: "partials/user.html",
controller: "controller",
controllerAs: "vm",
}
}
});

Answer

i have created the plunkr. Please have a look

(https://plnkr.co/edit/6fx26BVrXu0ud8TkvrMq?p=preview)

myApp.controller('ModalController', ['$scope', '$uibModalInstance', '$uibModal', '$state', function($scope, $uibModalInstance, $uibModal, $state) {
        var self = this;
        self.cancel = function(){
            $uibModalInstance.dismiss();
        };

    }]);
     myApp.controller('userController', ['$scope', '$uibModal', '$state', function($scope, $uibModal, $state) {
        var self = this;
        self.animationsEnabled = true;

        self.open = function(){

         var modalInstance = $uibModal.open({
              animation: self.animationsEnabled,
              ariaLabelledBy: 'modal-title',
              ariaDescribedBy: 'modal-body',
              templateUrl: 'hello.html',
              controller: 'ModalController',
              controllerAs: 'vm'

          });
        };
    }]);
Comments