アングラーjsのcomple使い方

7207 ワード
javascript
anglarjsでは重要ですが、手動で起動するのはめったにないです.コンポーネントやコマンドを書く時は、anglarjsが自動的にコンパイルして完成します.でも、時々、tableのパッケージを手動でコンパイルする必要があります.パラメータによってカスタマイズ陰影を実現します.チェックボックスやボタンの列を増やすなど、comppileを使う必要があります.
基本的な使い方
まず簡単な例を見ます.

<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>angulartitle>
    <script src="libs/jquery.js">script>
    <script src="libs/angular.js">script>
    <script>
        angular.module('myApp', [])
            .controller('MyController', function ($scope, $compile) {
                var vm = this;
                vm.msg = 'hello';
                //       
                var compileFn = $compile('
{{appCtrl.msg}}
');
                //   scope，      dom  (    jqlite  )
                //     $scope.$new()        
                var $dom = compileFn($scope); 
                //       
                $dom.appendTo('body');            
            })
    script>
head>
<body ng-controller="MyController as appCtrl">
body>
html>
compleサービスにより、html文字列またはdomオブジェクトまたはjqLiteオブジェクトをコンパイルし、コンパイル関数を得て、また$scopeに入ってきたら、現在のスコープでコンパイルして、コンパイルされたjqLiteオブジェクトに戻ります.ドキュメントに直接追加することができます.コンパイルの実質とは、domオブジェクトを解析して、domオブジェクトとscopeを結合させることで、結合によってデータの更新ができます.
コマンドとして実装

<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>angulartitle>
    <link rel="stylesheet" href="libs/bootstrap.css">
    <script src="libs/jquery.js">script>
    <script src="libs/angular.js">script>
    <script>
        angular.module('myApp', [])
            .controller('MyController', function ($scope, $compile, $timeout) {
                var vm = this;
                vm.html = '
{{title}}
\
                            
    \
                                
  • {{item}}
    • \
                            
'

            })
            .directive('compile', function($compile) {
                return {
                    scope: {
                        compile: '='
                    },
                    link: function(scope, elem, attrs) {
                        scope.title = 'list';
                        scope.items = ['list1', 'list2', 'list3'];
                        elem.html($compile(scope.compile)(scope))
                    }
                }
            })
    script>
head>
<body ng-controller="MyController as appCtrl">
    <div compile="appCtrl.html">div>
body>
html>
Androidの最近のタスクリストの簡単な分析