angularJS的$attrs方法使用代码实例

2023-12-04 13:39:58 前端笔记 54

下面就是相关此方法应用的代码实例，需要的朋友可以做一下参考。

代码:

<!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>