æ令ï¼å¾éè¦
AngularJSä¸JQueryæ大çåºå«å¨åªéï¼æ认为ï¼è¡¨ç°å¨æ°æ®ååç»å®ï¼å®è´¨å°±æ¯DOMçæä½å½¢å¼ä¸ä¸æ ·ã
JQueryéè¿éæ©å¨æ¾å°DOMå
ç´ ï¼åèµäºå
ç´ çè¡ä¸ºï¼
èAngularJSåæ¯ï¼å°æ令ä¸DOMç»å®å¨ä¸èµ·ï¼åæ©å±æ令çè¡ä¸ºã
æ以AngularJSå¼åæçæ³çç»æå°±æ¯ï¼å¨é¡µé¢HTMLä¸CSSç设计æ¶ï¼è®¾è®¡å·¥ç¨å¸åªéè¦å
³æ³¨æ令ç使ç¨ï¼èå¨èåçé»è¾å¼åä¸ï¼æ¶æå·¥ç¨å¸åæ¯ä¸éè¦ç¥éå¦ä½æä½DOMï¼åªéè¦å
³æ³¨æ令èåçè¡ä¸ºè¦å¦ä½å®ç°å°±è¡ï¼æµè¯å·¥ç¨å¸ä¹å¯ä»¥å¼åé对æ令çåå
æµè¯ã
æ令就æ¯DOMä¸é»è¾è¡ä¸ºçåªä»ï¼æ¬è´¨å°±æ¯DOMç»å®çç¬ç«é»è¾è¡ä¸ºå½æ°ã
æ令é¾ç¹å¨äºåæ°
æ¥ççé½æåªäº
angular.module('app', [])
.directive('myDirective', function() {
return {
restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) {...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // è¿åä¸ä¸ªå¯¹è±¡æè¿æ¥å½æ°ï¼å¦ä¸æ示ï¼
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
return function postLink(...) { ... }
}
};
});
åå¼å§æ¥è§¦æ令çæ¶åï¼æç®ç´å°±æ¯èäºï¼è¿å åæ°ç©¶ç«æä¹ç¨æä¹ç解åãåè¯å¤§å®¶æçä¸ä¸ªç解æ¹æ³ã
æå®ä»¬åæä¸ç±»ï¼
æè¿°æ令æDOMæ¬èº«ç¹æ§çå
é¨åæ°
è¿æ¥æ令å¤çãä¸å
¶ä»æ令ææ§å¶å¨æ²éç对å¤åæ°
æè¿°æ令æ¬èº«è¡ä¸ºçè¡ä¸ºåæ°
å
é¨åæ°
restrictï¼Stringï¼Eï¼å
ç´ ï¼<my-directive></my-directive> Aï¼å±æ§ï¼é»è®¤å¼ï¼<div
my-directive="expression"></div> Cï¼ç±»åï¼<div class="my-directive:expression;"></div> Mï¼æ³¨éï¼<--directive:my-directive
expression-->
priority: Numberï¼æ令æ§è¡ä¼å
级
template: Stringï¼æ令é¾æ¥DOM模æ¿ï¼ä¾å¦â<h1>{{head}}</h1>â
templateUrl:Stringï¼DOM模æ¿è·¯å¾
replace: Booleanï¼æ令é¾æ¥æ¨¡æ¿æ¯å¦æ¿æ¢åæå
ç´ ï¼
对å¤åæ°ââscope
scopeåæ°é常éè¦ï¼æ¬åºè¯¥æ¯æ¾å°æå说æçï¼ä½æ¯scopeå´æ¯ç解å
¶ä»åæ°çå
³é®ï¼æ以å¡å¿
å
è·å¤§å®¶è¯´æ¸
æ¥ã
scopeåæ°çä½ç¨æ¯ï¼é离æ令ä¸æå¨æ§å¶å¨é´çä½ç¨åãé离æ令ä¸æ令é´çä½ç¨åã
scopeåæ°æ¯å¯éçï¼é»è®¤å¼ä¸ºfalseï¼å¯étrueã对象{}ï¼
falseï¼å
±äº«ç¶å
trueï¼ç»§æ¿ç¶åï¼ä¸æ°å»ºç¬ç«ä½ç¨å
对象{}ï¼ä¸ç»§æ¿ç¶åï¼ä¸æ°å»ºç¬ç«ä½ç¨å
falseãtrueã{}ä¸è
对æ¯
æ¥ç个ä¾å
<body>
<div ng-controller='parentCtrl'>
<h3>æ令scopeåæ°ââfalseãtrueã{}对æ¯æµè¯</h3>
parent:
<div>
<span> {{parentName}}</span>
<input type="text" ng-model="parentName" />
</div>
<br />
<child-a></child-a>
<br />
<child-b></child-b>
<br />
<child-c parent-name="parentName"></child-c>
</div>
<!--t1æ令模æ¿-->
<script type="text/html" id="t1">
<div>
<span>{{parentName}}</span>
<input type="text" ng-model="parentName" />
</div>
</script>
<script>
var app = angular.module("app", []);
app.controller('parentCtrl', function ($scope) {
$scope.parentName = "parent";
})
//falseï¼å
±äº«ä½ç¨å
app.directive('childA', function () {
return {
restrict: 'E',
scope: false,
template: function (elem, attr) {
return "false:" + document.getElementById('t1').innerHTML;
}
};
});
//trueï¼ç»§æ¿ç¶åï¼å¹¶å»ºç«ç¬ç«ä½ç¨å
app.directive('childB', function () {
return {
restrict: 'E',
scope: true,
template: function (elem, attr) {
return "true:" + document.getElementById('t1').innerHTML;
},
controller: function ($scope) {
$scope.parentName = "parent";
//已声æçæ
åµä¸ï¼$scope.$watchçå¬çæ¯èªå·±çparentName
$scope.$watch('parentName', function (n, o) {
console.log("child watch" + n);
});
//$scope.$parent.$watchçå¬çæ¯ç¶åçparentName
$scope.$parent.$watch('parentName', function (n, o) {
console.log("parent watch" + n);
});
}
};
});
//{}ï¼ä¸ç»§æ¿ç¶åï¼å»ºç«ç¬ç«ä½ç¨å
app.directive('childC', function () {
return {
restrict: 'E',
scope: {},
template: function (elem, attr) {
return "{}:" + document.getElementById('t1').innerHTML;
},
controller: function ($scope) {
console.log($scope);
}
};
});
</script>
</body>
falseåæ°
æ¬è´¨ï¼ååä¸ç¶åå
±äº«ä½ç¨åã
ç¹ç¹ï¼ç¶åä¿®æ¹parentNameçåæ¶ï¼æ令ç»å®çparentNameçå
ç´ ä¼è¢«å·æ°ã
blog.csdn.net/kongjiea/article/details/49840035
温馨提示:内容为网友见解,仅供参考