ホームページ > 記事 > ウェブフロントエンド > AngularJSの初期化静的テンプレート_AngularJSの詳細説明

AngularJSの初期化静的テンプレート_AngularJSの詳細説明

WBOYオリジナル: 2016-05-16 15:20:021075ブラウズ

AngularJS は、ng-app を使用してモジュールを自動的に初期化することも、angular.bootstrap(document, [module]) を使用してアプリケーションを手動で開始することもできます。どの方法を使用しても、アプリケーションの開始後に dom 要素が動的に開始されます。 dom ツリーに追加されたため、angular 命令を実行できません。つまり、ng-model および ng-click を介して動的に追加された dom 要素にデータとイベントをバインドできません。どうすればよいですか?

ボタンをクリックしてページ上のユーザー情報を変更し、Ajax リクエストを送信してユーザー情報をクエリし、テンプレートエンジンを使用して事前に作成された静的テンプレートをコンパイルするなど、DOM 要素を動的に追加することは非常に一般的です。ページを HTML 文字列に追加します。最後に、HTML 文字列をページに追加して表示します。

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>demo</title>
  <meta charset="utf-8"/>
  <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script id="others_angular_103" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/other/angular.min.js"></script>
  <style>
    .contani{
      width: 100%;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body ng-controller="myCtrl">
<script>
  var app = angular.module('app',[]);
  app.controller('myCtrl', ['$scope','$compile',function(scope,$compile){
    scope.valchange = function(){
      console.log('value change')
    }
    scope.edit = function(){
      //假设这是ajax返回的数据
      scope.username = 'wangmeijian';
      scope.password = '000000';
      $(".contani").html(myTmpl.innerHTML);
    }
  }])
</script>
<button ng-click="edit()">修改资料</button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
  <form>
    用户名：<input type="text" ng-model="username" />
    密码：<input type="text" ng-model="password" />
  </form>
</script>
</body>
</html>

データの変更ボタンをクリックします。新しく挿入された dom 要素は、ボタンをクリックする前に angular が初期化されているため、再度初期化するのではなく、使用する必要があります。 $compile で静的ファイルをコンパイルします。テンプレートの HTML が dom ツリーに挿入されます

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>demo</title>
  <meta charset="utf-8"/>
  <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script id="others_angular_103" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/other/angular.min.js"></script>
  <style>
    .contani{
      width: 100%;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body ng-controller="myCtrl">
<script>
  var app = angular.module('app',[]);
  app.controller('myCtrl', ['$scope','$compile',function(scope,$compile){
    scope.valchange = function(){
      console.log('value change')
    }
    scope.edit = function(){
      //假设这是ajax返回的数据
      scope.username = 'wangmeijian';
      scope.password = '000000';
      //$(".contani").html(myTmpl.innerHTML);
      $(".contani").append( $compile(myTmpl.innerHTML)(scope) )
    }
  }])
</script>
<button ng-click="edit()">修改资料</button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
  <form>
    用户名：<input type="text" ng-model="username" ng-change="valchange()" />
    密码：<input type="text" ng-model="password" ng-change="valchange()" />
  </form>
</script>
</body>
</html>

上記は AngularJS の初期化静的テンプレートの詳細な紹介であり、皆様の学習に役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブラウザ環境での JavaScript スクリプトの読み込みと実行の分析: 遅延と非同期の特性_JavaScript スキル次の記事：ブラウザ環境での JavaScript スクリプトの読み込みと実行の分析: 遅延と非同期の特性_JavaScript スキル

続きを見る

AngularJSの初期化静的テンプレート_AngularJSの詳細説明

関連記事