$ modal未按预期工作

Question

＆＃13;

＆＃13;

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'
        })}
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想在modalpopup中获取firstname的值，弹出模板应该继承controller属性并显示正确的值，它不起作用。你能帮忙吗？

Answer 1

您可以将$scope传递给模态实例，如下所示：

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 {
                	 '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>