angularJS的$attrs方法使用代碼實例
下面就是相關此方法應用的代碼實例,需要的朋友可以做一下參考。
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<title>實例</title>
<script src="js/jquery.js"></script>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="Demo">
<div a> a_directive </div>
<div ng-controller="TestCtrl">
<h1 t> 原始內容 </h1>
<h2 t2> 原始內容 </h2>
<h3 t3="hiphop" title2="{{name}}"> 原始內容 </h3>
<div compile></div>
<div>
<test a="{{ a }}" b c="xxx"></test>
<button ng-click="a=a+1"> 修改 </button>
</div>
<te a="1" ys-a="123" ng-click="show(1)">這里</te>
</div>
<script>
var app = angular.module('Demo', [], angular.noop);
app.controller("TestCtrl",function($scope) {
$scope.name = "qihao";
});
app.directive("t",function() {
return {
controller : function($scope){$scope.name = "qq"},
template : "<div>test:implementToParent{{name}}</div>",
replace : true,
scope : true //作用域是繼承的,默認就是繼承的
}
});
app.directive("t2",function() {
return {
controller : function($scope){$scope.name = "nono"},
template : "<div>test:implementToParent{{name}}</div>",
replace : true,
restrict : "AE"
}
});
app.directive("t3",function() {
return {
template : "<div>test:implementToParent_titleIs:{{title}}<br>title2Is:{{title2}}</div>",
replace : true,
restrict : "AE",
scope : {
title : "@t3",
title2 : "@title2"
}
}
});
app.directive('a',function() {
var func = function() {
console.log('compile');
return function() {
console.log('link');
}
}
var controller = function($scope, $element, $attrs, $transclude) {
//$transclude :是指令標簽的復制體
console.log('controller');
console.log($scope);
console.log($transclude);
//$transclude接受兩個參數,你可以對這個克隆的元素進行操作,
var node = $transclude(function(clone_element, scope) {
$element.append(clone_element);
$element.append("<span>spanTag___</span>");
console.log(clone_element);
console.log('--');
console.log(scope);
});
console.log(node);
}
return {
compile: func,
template: "<h1 ng-transclude></h1>",
controller: controller,
transclude: true,
restrict: 'AE'
}
});
app.directive('compile',function() {
var func = function() {
console.log('a compile');
return {
pre: function() {
console.log('a link pre')
},
post: function() {
console.log('a link post')
},
}
}
return {
restrict : "AE",
compile : func
}
})
app.directive('test', function(){
var func = function($element, $attrs){
console.log($attrs);
$attrs.$observe('a', function(new_v){
console.log(new_v);
});
}
return {
compile: func,
restrict: 'E'
}
});
app.controller('TestCtrl', function($scope){
$scope.a = 123;
});
app.directive('te', function(){
var func = function($scope,$element, $attrs,$ctrl){
console.log($ctrl)
//$attrs.$set. 給這個屬性設置b,值為ooo,就是這樣
$attrs.$set('b', 'ooo');
$attrs.$set('a-b', '11');
//這個還有點不懂啊 //第二個參數值
$attrs.$set('c-d', '11', true, 'c_d');
console.log($attrs);
}
return {
compile: function(){
return func
},
restrict: 'E'
}
});
app.controller('TestCtrl', function($scope){
$scope.show = function(v){console.log(v);}
});
</script>
</body>
</html>
聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至201542412@QQ.com舉報,一經查實,本站將立刻刪除。
相關推薦
-
angularJS進行表單提交代碼實例
本章節分享一段代碼實例,它實現了使用ngulrJS進行表單提交的功能。有需要的朋友可以做一下參考,代碼實例如下: chrs
-
阻止點擊回車提交表單效果代碼實例
本章節介紹一下如何阻止點擊回車提交表單效果。在默認情況下,如果表單或者表單元素獲取焦點的話,點擊回車就會提交表單。但是在實際應用中,往往需要只點擊提交按鈕才能夠提交表單。代碼實例如下:
-
js模擬實現StringBuffer類功能代碼實例
JvScrit并沒有內置的StringBuffr()方法,下面就通過代碼實例來模擬實現它的功能。代碼實例如下:function StringBuffr() { this.__strings
-
使用js動態創建div元素并設置其文本內容
本章節介紹一下如何利用js動態的創建div元素,并設置div元素的文本內容。代碼實例如下:
-
將十六進制顏色值轉換為RGB顏色值代碼實例
本章節分享一段代碼實例它能夠實現將十六進制顏色值轉換為RGB顏色值代碼實例。如果從RGB顏色值轉換為十六進制顏色值可以參閱jQury如何將獲取的顏色值轉換為十六進制形式一章節。代碼實例:!DOCT















