AngularJS を介して dom に追加されたメソッドの動的コンパイルを実装する-jsチュートリアル-php.cn

AngularJS を介して dom に追加されたメソッドの動的コンパイルを実装する

高洛峰

リリース： 2017-03-25 16:12:11

オリジナル

1774 人が閲覧しました

この記事の例では、AngularJS が動的コンパイルを実装し、それを dom に追加する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

angularjs を使用する場合、angular テンプレートを動的に構築し、それを angular を通じて表示したいと考えています。

使用方法は以下の通りです:

<html ng-app="app">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="assets/angular.min.js"></script>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/handlebars.min.js"></script>
  <script src="assets/Handlebars.helper.js"></script>
  <script >
  var app=angular.module("app",[]);
  app.controller(&#39;ctrl&#39;, [&#39;$scope&#39;,&#39;$compile&#39;,function($scope,$compile){
    $scope.userName=&#39;RAY&#39;;
    $scope.test = function test(){
      console.log(&#39;你好:&#39; +$scope.userName);
    }
    //通过$compile动态编译html
    var html="<button ng-click=&#39;test()&#39;>{{userName}}</button>";
    var template = angular.element(html);
    var mobileDialogElement = $compile(template)($scope);
    angular.element(document.body).append(mobileDialogElement);
  }]);
  </script>
</head>
<body ng-controller="ctrl">
</body>
</html>

ログイン後にコピー

var html="<button ng-click=&#39;test()&#39;>{{userName}}</button>";

ログイン後にコピー

この種のコードは angularjs コンパイラーを通してコンパイルすることで、angular スコープ内のオブジェクトデータにアクセスできます。

上記は AngularJS の動的コンパイルと dom への追加方法の内容です。その他の関連内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

AngularJSはdivのIDを動的に生成する

AngularJSはモジュールと依存関係を動的にロードする

AngularJSは動的に生成された要素にイベントをバインドするメソッドを実装する

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

AngularJS を介して dom に追加されたメソッドの動的コンパイルを実装する