ホームページ > 記事 > ウェブフロントエンド > AngularJS を介して dom に追加されたメソッドの動的コンパイルを実装する

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

高洛峰オリジナル: 2017-03-25 16:12:111768ブラウズ

この記事の例では、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は動的に生成された要素にイベントをバインドするメソッドを実装する

声明：

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

前の記事：AngularJS ユーザーセレクターディレクティブの例の分析次の記事：AngularJS ユーザーセレクターディレクティブの例の分析

続きを見る

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

関連記事