CODEWITHSUNDEEP
javascriptangularjs
Abhishek
Abhishek

Reputation: 351

$modal is not working as expected

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope,$modal){
    $scope.firstName = "John";
    $scope.lastName = function(){
            $modal.open({
            template: '<h1>{{firstName}}</h1>',
            size: 'sm',
            backdrop: 'static'
        })}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script><div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="submit" ng-click="lastName()"><br>
<br>
Full Name: {{firstName}}

</div>

I want to get the value of firstname in the modalpopup, the popup template should inherit the controller property and display the value right, it's not working. Can you please help?

Upvotes: 2

Views: 55

Answers (2)

Kalaiselvan
Kalaiselvan

Reputation: 2134

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('testingCtrl',function($scope,param){
 //here you can able to access parent scope also
 $scope.firstName=param.data;
});
app.controller('myCtrl', function($scope,$modal){
    $scope.firstName = "John";
    $scope.lastName = function(){
            $modal.open({
            template: '<h1>Name :{{firstName}}</h1>',
            size: 'sm',
            controller:'testingCtrl',
            backdrop: 'static',
            resolve: {
             param: function () {
                 return {
                	 'data':$scope.firstName, 
               	     'parentScope':$scope
                 };
             }
         } 
        })}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script><div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="submit" ng-click="lastName()"><br>
<br>
Full Name: {{firstName}}

</div>

Upvotes: 1

Nico Van Belle
Nico Van Belle

Reputation: 5166

You can pass the $scope to the modal instance like this:

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope,$modal){
    $scope.firstName = "John";
    $scope.lastName = function(){
            $modal.open({
            scope: $scope,
            template: '<h1>{{firstName}}</h1>',
            size: 'sm',
            backdrop: 'static'
        })}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script><div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="submit" ng-click="lastName()"><br>
<br>
Full Name: {{firstName}}

</div>

Upvotes: 5

Related Questions