$ modal funktioniert nicht wie erwartet

Question

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>

Ich mag den Wert des Vornamen in der Modalpopup erhalten, sollte die Popup-Vorlage, um die Controller-Eigenschaft erbt und den Wert richtig angezeigt werden, es funktioniert nicht. Können Sie bitte helfen?

Answer 1

Sie können die $scope zum Modalinstanz wie dies passieren:

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>

Answer 2

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 { 
 
       \t 'data':$scope.firstName, 
 
       \t  '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>