javascript - $modal 没有按预期工作

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>

我想在modalpopup中获取firstname的值，popup模板应该继承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>