Question

我有2页，Person.html和PersonNewEdit.html

在第一个中，我们通过bootstrap模态窗口打开第二个。

问题：AngularJS在第二个文件（PersonNewEdit.Html）中不起作用。

Person.html内容：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <script src="js/angular.min.js"></script>
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="myappCtrl">
    <p>In main page MSG: {{MSG}}</p>

    <!-- Modal window wll display here -->
      <div id="myModal" class="modal fade" role="dialog">
      </div>

    <button type="button" class="btn btn-default" onclick="NewPerson()">New Person</button>
</div>        

<script type="text/javascript">
    function NewPerson() {
        $("#myModal").find('*').remove();            
        $("#myModal").load("PersonNewEdit.html");
        $("#myModal").modal();
    }

    function CloseModalWindow()
    {
        //we will use this function in Modal pages
        $("#myModal").modal('hide');
    }

    var app = angular.module('myapp', []);
    app.controller('myappCtrl', function ($scope) {
        $scope.MSG = "Test";
    });
</script>
</body>
</html>

和PersonNewEdit.html内容：

<!DOCTYPE html>
<html>
<head>
   <title>Modal window</title>
   <meta charset="utf-8" />
</head>
<body>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <div class="col-lg-9">
                <h4 class="modal-title">Person new edit</h4>
            </div>
        </div>
        <div class="modal-body">

            <div id="app2" ng-app="myapp2" ng-controller="myappCtrl2">
                <div>
                    In modal page MSG: {{MSG}}
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button id="btnSave" class="btn btn-primary" onclick="Save();">Save</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    var PersonId = 0;
    function Save() {
        //save data to database
        CloseModalWindow();         //Declare this function in Person.html
    }

    var app2 = angular.module('myapp2', []);
    app2.controller('myappCtrl2', function ($scope) {
        $scope.MSG = "Test 2";
    });        
</script>
</body>
</html>

Answer 1

AngularJs未包含在第二个html文件中。您还应该统一这些html文件，并使其成为单个应用程序（而不是具有2个单独的应用程序），并具有部分视图。因为您在第一个文件中将CloseModelWindow声明为内联，所以您在第二个html中没有。您可以创建一个单独的person.js，它包含在两个文件中，并从那里引用函数。

如何在远程Modal窗口中使用AngularJS

1 个答案: