命令のrestrictプロパティの理解
1825 ワード
restrcitプロパティの説明
restrict:EACMのいずれかの母.命令を制限するための宣言形式です.
何をしたの?
例
実行結果
いくつかの方法が見えますが、やることは同じで、一部の場所だけ違います.これらの違いは何の役割がありますか?
効果
restrict=Eの場合、ブラウザが命令の宣言要素を認識できない場合、この命令は必ず置換作用を果たす、すなわちtemplateには必ず値がある.
restrict=Aの場合、要素属性で存在するので、この命令の役割は置換でなくてもよい.では、何ができますか?domをlinkで操作する.
たとえば、初期に要素をフォーカスする
restrict=Cは、命令をバインドするとともに、そのcssスタイルを指定し、命令をスタイルと同期させる.
restrict=Mは、注釈とコードの切り替えに便利な場合がある.
restrict:EACMのいずれかの母.命令を制限するための宣言形式です.
E - ：<my-directive></my-directive>
A - ： <div my-directive="exp"> </div>
C - ：<div class="my-directive: exp;"></div>
M - ： <!-- directive: my-directive exp -->何をしたの?
例
<html ng-app='app'>
<body>
<hello> </hello>
<div hello> </div>
<div class="hello"> </div>
<!-- directive: hello -->
</body>
<script src="bower_components/angular/angular.js"></script>
<script>
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
return {
restrict: 'AEC',
template: '<h3>Hi there</h3>',
replace: true
link:function(scope, elem, attrs){
console.log(elem);
//console.log(attrs);
}
};
});
</script>
</html>実行結果
<h3>Hi there</h3>
<h3 hello>Hi there</h3>
<h3 class="hello">Hi there</h3>
<h3>Hi there</h3>いくつかの方法が見えますが、やることは同じで、一部の場所だけ違います.これらの違いは何の役割がありますか?
効果
restrict=Eの場合、ブラウザが命令の宣言要素を認識できない場合、この命令は必ず置換作用を果たす、すなわちtemplateには必ず値がある.
restrict=Aの場合、要素属性で存在するので、この命令の役割は置換でなくてもよい.では、何ができますか?domをlinkで操作する.
たとえば、初期に要素をフォーカスする
<input type="input" focus/>
appModule.directive('focus', function() {
return {
restrict: 'A',
link:function(scope, elem, attrs){
$(elem).focus();
}
};
});restrict=Cは、命令をバインドするとともに、そのcssスタイルを指定し、命令をスタイルと同期させる.
restrict=Mは、注釈とコードの切り替えに便利な場合がある.