angularjs学習学部(1)

angularjs作成命令replace,transclud eドメインの使い方について
Angularjsのコマンド作成には、作成されたコマンドhelloなどの4つの形式があります.
(1)ページラベルの形式E:

angularjs作成命令

replaceの使い方

(2)ラベル属性の形式A(angularjsデフォルト):
(3)ラベルスタイルクラスの形式C:
(4)ページコメントの形式M:(コメント番号の前後にスペースがある)
命令の作成コード:

myApp.directive('hello',function(){
	return {
		restrict:'ACEM',
		template:'<div>hello everyone!</div>',
		//transclude:false
		replace:false
	}
});

【一】replaceがfalseに設定されている場合、最終ページに表示されるhtml結果は以下の通りです.

      C： <div class="hello"><div>hello everyone!</div></div>
      A： <div hello=""><div>hello everyone!</div></div>
      E： <hello><div>hello everyone!</div></hello> 
      M： <!-- directive:hello -->（    ，   ）

【二】replaceがtrueに設定されている場合、最終ページに表示されるhtml結果は以下の通りです.

      C：<div class="hello">hello everyone!</div>
      A：<div hello="">hello everyone!</div>
      E：<div>hello everyone!</div> 
      M：<div hello="">hello everyone!</div> （  ）

replaceを使うにはどんな欠点がありますか.例えば、私は文章の冒頭をhelloの下に命令します.
ページに表示するには、transcludeドメインの設定で解決できます.

myApp.directive('hello',function(){
	return {
		restrict:'ACEM',
		template:'<div>hello everyone!<span ng-transclude></span></div>',
		transclude:true
	}
});

これにより、命令内のDOMタグを表示できます.

       C：<div class="hello"><div>hello everyone!<span ng-transclude=""><span class="ng-scope">   </span></span></div></div>
       A：<div hello=""><div>hello everyone!<span ng-transclude=""><span class="ng-scope">  </span></span></div></div>
       E：<hello><div>hello everyone!<span ng-transclude="">
		   <div class="ng-scope">angularjs    </div>
		   <div class="ng-scope">replace   </div>
		</span></div></hello> 
       M：<!-- directive:hello -->

参照先:http://stackoverflow.com/questions/15285635/how-to-use-replace-of-directive-definition