アングラーの単一ページを解決するには、一つのng-apだけをロードすることができます。

9171 ワード

アングラー

実際には、一つのページに複数のng-apがあれば、angglarは最初のng-ap関連問題だけを処理することができます。単一のanglarページには二つのng-apがありますか？http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page
問題の繰り返し:


<html>
    <head>
    <meta charset="utf-8">
        <title>title>
        <style> style> 
        <script src="js/jquery.min.js">script>
        <script src ="js/angular.js">script>

        <script >       
        var app = angular.module("myapp",[]);
        app.directive("hello",function(){
            return {
                restrict:"E",
                template:'Hello angular
',
                replace:true
            }
        });
        var app2 = angular.module("dir",[]).run(function($templateCache){
            $templateCache.put("header.html","use templateCache
");
        });
        app2.directive("dir",function($templateCache){return {
            restrict:"E",
            template:$templateCache.get("header.html"),
            replace:true
        }});
    script>
    head>
    <body >
    <div ng-app="myapp">

        <hello>hello>
    div>
    <div ng-app="dir">
        <dir>dir>
    div>
body>
html>

運転後は出力のみになります。ハローアングラー
解決方法：angular.bootstrapを使用して、手動で第二のng-apを制御に追加します。

angular.bootstrap($("dir"),['dir']);

もちろん、第二のng-apで引き継ぐdivには、id属性dirを追加して、第二のng-apを削除します。したがって、最終的に2つのng-apが同時に1つのページに存在することができる完全な例示的なコードは、


<html>
    <head>
    <meta charset="utf-8">
        <title>title>
        <style> style> 
        <script src="js/jquery.min.js">script>
        <script src ="js/angular.js">script>
    head>
    <body >
    <div ng-app="myapp">

        <hello>hello>
    div>
    <div id="dir" >
        <dir>dir>
    div>
        <script >       
        var app = angular.module("myapp",[]);
        app.directive("hello",function(){
            return {
                restrict:"E",
                template:'Hello angular
',
                replace:true
            }
        });
        var app2 = angular.module("dir",[]).run(function($templateCache){
            $templateCache.put("header.html","use templateCache
");
        });
        app2.directive("dir",function($templateCache){return {
            restrict:"E",
            template:$templateCache.get("header.html"),
            replace:true
        }});
        angular.bootstrap($("dir"),['dir']);
    script>
body>
html>

anglar.bootstrapの一点について検討します。1.ng-apを使って、ページを読み込む時はこのように処理します。

angglarがng-apタグを見つけたら、まずmoduleに関するdirective

をロードする。

アプリケーション関連injector（依存マネージャ）

を作成します。

は、ゲームアプリをルートノードとするDOMのコンパイルを開始する

。
2、anglar.bootstrap方法は、ng-apを検索する過程を省き、bootstrapに伝えるパラメータの一つはDOMオブジェクト、もう一つはモジュール名配列と理解できる。

CentOS 7+Apache+PHP+MySql+EduSoho