Здесь я делюсь с вами примером использования метода $ attrs в AngularJS:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<название>
Без названия документ
</title>
<script src = "http: // localhost: 81/js/jquery.js">
</script>
<script src = "http: // localhost: 81/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>
<тест a = "{{a}}" bc = "xxx"> </test>
<кнопка ng-click = "a = a+1">
Исправлять
</button>
</div>
<te a = "1" ys-a = "123" ng-click = "show (1)"> здесь </te>
</div>
<Скрипт>
var app = angular.module ('demo', [], angular.noop);
app.controller ("testctrl",
Функция ($ scope) {
$ scope.name = "Qihao";
});
app.directive ("t",
function () {
возвращаться {
Контроллер: функция ($ scope) {$ scope.name = "qq"},
Шаблон: "<div> test: infultoparent {{name}} </div>",
Заменить: правда,
Сфера применения: True // Применение унаследовано, по умолчанию унаследовано
}
});
App.Directive ("T2",
function () {
возвращаться {
Контроллер: функция ($ scope) {$ scope.name = "nono"},
Шаблон: "<div> test: infultoparent {{name}} </div>",
Заменить: правда,
Ограничение: "AE"
}
});
App.Directive ("T3",
function () {
возвращаться {
Шаблон: "<div> test: infultoparent_titleis: {{title}} <br> title2is: {{title2}} </div>",
Заменить: правда,
ограничить: "AE",
объем : {
Название: "@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 ($ accope);
console.log ($ transclude);
// $ transclude принимает два параметра, вы можете работать на клонированных элементах.
var node = $ transclude (function (clone_element, scope) {
$ element.append (clone_element);
$ element.append ("<pan> spantag ___ </span>");
console.log (clone_element);
console.log ('-');
console.log (Scope);
});
console.log (узел);
}
возвращаться {
компиляция: фанк,
Шаблон: "<H1 ng-transclude> </h1>",
контроллер: контроллер,
Transclude: True,
Ограничение: 'AE'
}
});
app.directive ('compile', function () {
var func = function () {
console.log ('A Compile');
возвращаться {
pre: function () {
console.log ('ссылка до')
},
post: function () {
console.log ('a post')
},
}
}
возвращаться {
ограничить: "AE",
Компиля: фанк
}
})
app.directive ('test', function () {
var func = function ($ element, $ attrs) {
console.log ($ attrs);
$ attrs. $ veamere ('a', function (new_v) {
console.log (new_v);
});
}
return {compile: func,
Ограничение: 'e'}
});
app.controller ('testctrl', function ($ scope) {
$ scope.a = 123;
});
app.directive ('te', function () {
var func = function ($ scope, $ element, $ attrs, $ ctrl) {
Console.log ($ ctrl)
//$ATTRS.DSET. Установите B для этого свойства, значение ооо, вот и все
$ attrs. $ set ('b', 'ooo');
$ attrs. $ set ('a-b', '11');
// Я до сих пор не понимаю этого // второго значения параметра
$ attrs. $ set ('c-d', '11', true, 'c_d');
console.log ($ attrs);
}
возвращаться {
Compile: function () {
вернуть фанк
},
ограничить: 'E'
}
});
app.controller ('testctrl', function ($ scope) {
$ scope.show = function (v) {console.log (v);}
});
</script>
</body>
</html>
Это все для этой статьи. Я надеюсь, что вы сможете получить новое понимание использования $ attrs в AngularJS. Надеюсь, вам понравится эта статья.