理解指令的restrict屬性

時間 2019-11-06

標籤理解指令 restrict 屬性简体版

原文原文鏈接

restrcit屬性說明

restrict: EACM中的任意一個之母。它是用來限制指令的聲明格式的。css

E - 元素名稱：<my-directive></my-directive>
A - 屬性： <div my-directive="exp"> </div>
C - 類名：<div class="my-directive: exp;"></div>
M - 註釋： <!-- directive: my-directive exp -->

它作了什麼

示例html

<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>

能夠看到幾種方式，作的事情同樣，只有部分地方不一樣. 這些區別有什麼做用？app

有何做用
dom

restrict=E時，瀏覽器沒法識別指令的聲明元素，則這個指令必定是起替換做用，也就是說template必定有值.spa

restrict=A時，它是以元素屬性存在的，那麼這個指令的做用能夠不是替換. 那麼它能夠作什麼？以link方式操做dom.rest

好比在初始時爲元素聚焦code

<input type="input" focus/>
appModule.directive('focus', function() {
    return {
        restrict: 'A',
        link:function(scope, elem, attrs){
            $(elem).focus();
        }
    };
});

restrict=C，則是在綁定指令的同時，指定它的css樣式，讓指令與樣式同步.component

restrict=M，則在一些場合很是有用，方便在註釋與代碼之間切換.htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。