如何使用多个 ng-app 并添加新模式

Question

这是我的 todo.js 文件

//let example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope, $localStorage) {

    $scope.save = function() {
        let testObject = [
            {
                name:"aaa",
                lastName:"bbb"
            },
            {
                name:"ccc",
                lastName:"ddd"
            }
        ]
        let myVal = $localStorage.myKey;
        $localStorage.$reset();
        if(!myVal){
            console.log("okey");
            $localStorage.myKey = testObject;
        } else {
            myVal.push({
                name:"fff",
                lastName:"ggg"
            })
            $localStorage.myKey = myVal;
        }

        $scope.datas = $localStorage.myKey;
    }

    $scope.load = function() {
        console.log($localStorage.myKey)
    }


});*/

var app = angular.module("modalFormApp", ['ui.bootstrap']);
app.controller("modalAccountFormController", function ($scope, $modal, $log) {

        $scope.showForm = function () {
            $scope.message = "Show Form Button Clicked";
            console.log($scope.message);

            var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                controller: ModalInstanceCtrl,
                scope: $scope,
                resolve: {
                    userForm: function () {
                        return $scope.userForm;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                $scope.selected = selectedItem;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };
});

var ModalInstanceCtrl = function ($scope, $modalInstance, userForm) {
    $scope.form = {}
    $scope.submitForm = function () {
        if ($scope.form.userForm.$valid) {
            console.log('user form is in scope');
            $modalInstance.close('closed');
        } else {
            console.log('userform is not in scope');
        }
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

这是我的 index.html 文件：

<html>
    <head>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
        <script src="../node_modules/angular-1.6.9/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script>
        <script src="./todo.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
    </head>
    <body>
        <!--<div  ng-app="example">
            <div ng-controller="ExampleController">
                <button ng-click="save()">Save</button>
                <button ng-click="load()">Load</button>
                <br>
                <input type='text' ng-model='searchText' placeholder="Search..." />
                <ul>
                    <li ng-repeat="data in datas | filter:searchText">
                            {{data.name}}
                    </li>
                </ul>
            </div>
        </div>-->
        <div ng-app="modalFormApp">
            <div class="container">
                <div class="col-sm-8 col-sm-offset-2">

                    <!-- PAGE HEADER -->
                    <div class="page-header">
                        <h1>AngularJS Form Validation</h1>
                    </div>

                    <div ng-controller="modalAccountFormController">
                        <div class="page-body">
                            <button class="btn btn-primary" ng-click="showForm()">Create Account</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

最后是我的 modal.html:

<div class="modal-header">
        <h3>Create A New Account!</h3>
    </div>
    <form name="form.userForm" ng-submit="submitForm()" novalidate>
        <div class="modal-body">
            <!-- NAME -->
            <div class="form-group">
                <label>Name</label>
                <input type="text" name="name" class="form-control" ng-model="name" required>
                <p ng-show="form.userForm.name.$invalid && !form.userForm.name.$pristine" class="help-block">You name is required.</p>
            </div>

            <!-- USERNAME -->
            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
                <p ng-show="form.userForm.username.$error.minlength" class="help-block">Username is too short.</p>
                <p ng-show="form.userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
            </div>

            <!-- EMAIL -->
            <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" class="form-control" ng-model="email" required>
                <p ng-show="form.userForm.email.$invalid && !form.userForm.email.$pristine" class="help-block">Enter a valid email.</p>
            </div>

        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" ng-disabled="form.userForm.$invalid">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </form>

我试图在单击按钮时打开模式。我在我正在使用的另一部分做了注释行，但它工作正常。第二部分仅适用于模态，但不起作用。我什至无法打开模态。如果有一个基本的方法可以做到这一点，你能与我分享吗？我只需要打开这个模式。我可以处理剩下的事情。

Answer 1

来自文档：

There are a few things to keep in mind when using ngApp:

only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.

有关详细信息，请参阅

AngularJS ng-app Directive API Reference

如何使用多个 ng-app 并添加新模式

How to use multiple ng-app and add new modal

html

javascript

angularjs

angular-ui-bootstrap

ng-app