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>