Here is an example of using the $attrs method in angularJS: Copy code The code is as follows: <br> 无标题文档<br> http://localhost:81/js/jquery.js</a>"><br> http://localhost:81/js/angular.min.js</a>"><br> a_directive 原始内容 原始内容 原始内容 修改 这里 <br> var app = angular.module('Demo', [], angular.noop);<br> app.controller("TestCtrl",<br> function($scope) {<br> $scope.name = "qihao";<br> });<br> app.directive("t",<br> function() {<br> return {<br> controller : function($scope){$scope.name = "qq"},<br> template : "<div>test:implementToParent{{name}}</div>",<br> replace : true,<br> scope : true //作用域是继承的,默认就是继承的<br> }<br> });<br> app.directive("t2",<br> function() {<br> return {<br> controller : function($scope){$scope.name = "nono"},<br> template : "<div>test:implementToParent{{name}}</div>",<br> replace : true,<br> restrict : "AE"<br> }<br> });<br> app.directive("t3",<br> function() {<br> return {<br> template : "<div>test:implementToParent_titleIs:{{title}}<br>title2Is:{{title2}}</div>",<br> replace : true,<br> restrict : "AE",<br> scope : {<br> title : "@t3",<br> title2 : "@title2"<br> }<br> }<br> });<br> app.directive('a',<br> function() {<br> var func = function() {<br> console.log('compile');<br> return function() {<br> console.log('link');<br> }<br> }<br> var controller = function($scope, $element, $attrs, $transclude) {<br> //$transclude ：是指令标签的复制体<br> console.log('controller');<br> console.log($scope);<br> console.log($transclude);<br> //$transclude接受两个参数，你可以对这个克隆的元素进行操作，<br> var node = $transclude(function(clone_element, scope) {<br> $element.append(clone_element);<br> $element.append("<span>spanTag___</span>");<br> console.log(clone_element);<br> console.log('--');<br> console.log(scope);<br> });<br> console.log(node);<br> }<br> return {<br> compile: func,<br> template: "<h1 ng-transclude></h1>",<br> controller: controller,<br> transclude: true,<br> restrict: 'AE'<br> }<br> });<br> app.directive('compile',function() {<br> var func = function() {<br> console.log('a compile');<br> return {<br> pre: function() {<br> console.log('a link pre')<br> },<br> post: function() {<br> console.log('a link post')<br> },<br> }<br> }<br> return {<br> restrict : "AE",<br> compile : func<br> }<br> })<br> app.directive('test', function(){<br> var func = function($element, $attrs){<br> console.log($attrs);<br> $attrs.$observe('a', function(new_v){<br> console.log(new_v);<br> });<br> }<br> return {compile: func,<br> restrict: 'E'}<br> });<br> app.controller('TestCtrl', function($scope){<br> $scope.a = 123;<br> });<br> app.directive('te', function(){<br> var func = function($scope,$element, $attrs,$ctrl){<br> console.log($ctrl)<br> //$attrs.$set. 给这个属性设置b，值为ooo，就是这样<br> $attrs.$set('b', 'ooo');<br> $attrs.$set('a-b', '11');<br> //This is a bit unclear //The second parameter value<br> $attrs.$set('c-d', '11', true, 'c_d');<br> console.log($attrs);<br> }<br> return {<br> compile: function(){<br> Return func<br> },<br> restrict: 'E'<br> }<br> });<br> app.controller('TestCtrl', function($scope){<br> $scope.show = function(v){console.log(v);}<br> });<br> </body><br> </html><br> <br> </div> That’s it for this article. I hope you can have a new understanding of the use of $attrs in angularJS. I hope you like this article. <p></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
