脚本宝典收集整理的这篇文章主要介绍了js實例教程-Angularjs學習記錄之directive，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。
首先給出一段代碼：
Angular.module('docsTransclusionExample',[])
.controller('Controller', ['$scoPE', function($scope) {
$scope.name = 'Tobias';
}])
.directive(';myDiaLOG', function(){
return {
restrict: 'E',
transclude: true,
scope: {
summary: '='
},
templateUrl: 'my-dialog.htML',
link: function (scope,element) {
scope.name = 'Jeff';
}
};
});
解釋：
directive中的幾個屬性：
restrict
E：表示該directive僅能以element方式使用，即：<my-dialog></my-dialog>
A：表示該directive僅能以attribute方式使用，即：<p my-dialog></p>
EA: 表示該directive既能以element方式使用，也能以attribute方式使用
transclude
你的directive可能接受頁面上的其他html內容時才會用到，建議你先去掉該參數。有些高階了。
scope
當你寫上該屬性時，就表示這個directive不會從它的controller里繼承$scope對象，而是會重新創建一個。
templateUrl
你的directive里的html內容
link
可以簡單理解為，當directive被angular 編譯后，執行該方法
引用 directive的方法：在HTML中<my-dialog summary="summary"></my-dialog>
注意要把scope裡面的數據summary加上，不然數據不能正常顯示。
首先給出一段代碼：
angular.module('docsTransclusionExample',[])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Tobias';
}])
.directive('myDialog', function(){
return {
restrict: 'E',
transclude: true,
scope: {
summary: '='
},
templateUrl: 'my-dialog.html',
link: function (scope,element) {
scope.name = 'Jeff';
}
};
});
解釋：
directive中的幾個屬性：
restrict
E：表示該directive僅能以element方式使用，即：<my-dialog></my-dialog>
A：表示該directive僅能以attribute方式使用，即：<p my-dialog></p>
EA: 表示該directive既能以element方式使用，也能以attribute方式使用
transclude
你的directive可能接受頁面上的其他html內容時才會用到，建議你先去掉該參數。有些高階了。
scope
當你寫上該屬性時，就表示這個directive不會從它的controller里繼承$scope對象，而是會重新創建一個。
templateUrl
你的directive里的html內容
link
可以簡單理解為，當directive被angular 編譯后，執行該方法
引用 directive的方法：在HTML中<my-dialog summary="summary"></my-dialog>
注意要把scope裡面的數據summary加上，不然數據不能正常顯示。
覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！
以上是脚本宝典为你收集整理的js實例教程-Angularjs學習記錄之directive全部内容，希望文章能够帮你解决js實例教程-Angularjs學習記錄之directive所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。