当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

AngularJS ng-transclude用法及代码示例


ng-transclude伪指令用于标记使用包含的最近父级的包含DOM的插入点。使用插入插槽名称作为ng-transclude或ng-transclude-slot属性的值。

示例1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <script src= 
"//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> 
  </script> 
</head> 
  
<body ng-app="transcludeDemo"> 
    <center> 
      <script> 
        angular.module('transcludeDemo', []) 
          .directive('pane', function() { 
             return { 
                restrict:'E', 
                 transclude:true, 
                 scope:{ 
                    title:'@' 
                 }, 
                 template:  
               '<div style="border:3px solid black;">' +              
               '<div style="background-color:limegreen">'+ 
               '{{title.toUpperCase();}}</div>' +   
                          '<ng-transclude></ng-transclude>' + 
                            '</div>' 
                    }; 
                }) 
                .controller( 
          'ExampleController', ['$scope', function($scope) { 
                    $scope.title = 'gfg'; 
           }]); 
      </script> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <div ng-controller="ExampleController"> 
            <input ng-model="title" aria-label="title"> 
            <br/> 
            <pane title="{{title}}"> 
              <span>{{text}}</span></pane> 
        </div> 
    </center> 
</body> 
  
</html>

输出：

示例2：


<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <title> 
      simpleTranscludeExample 
  </title> 
  
    <script src= 
"//code.angularjs.org/snapshot/angular.min.js"> 
  </script> 
</head> 
  
<body ng-app="transcludeDemo"> 
   <center> 
      <script> 
        angular.module('transcludeDemo', []) 
          .directive('pane', function() { 
            return { 
              restrict:'E', 
              transclude:true, 
              scope:{ 
                title:'@' 
              }, 
              template:
       '<div style="border:1px solid black;">' + 
        '<div style="background-color:green">'+ 
              '{{title.toUpperCase();}}</div>' + 
             '<ng-transclude></ng-transclude>' + 
        '</div>' 
            }; 
        }) 
                .controller( 
          'ExampleController', ['$scope', function($scope) { 
                    $scope.title = 'gfg'; 
                    $scope.text = 'geeksforgeeks'; 
                }]); 
        </script> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <div ng-controller="ExampleController"> 
            <input ng-model="title" aria-label="title"> 
            <br/> 
            <textarea ng-model="text" aria-label="text"></textarea> 
            <br/> 
            <pane title="{{title}}"> 
              <span>{{text.toUpperCase();}}</span></pane> 
        </div> 
    </center> 
</body> 
  
</html>

输出：

示例3：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <title>ng-transclude</title> 
  
    <script src= 
"//code.angularjs.org/snapshot/angular.min.js"> 
  </script> 
  
</head> 
  
<body ng-app="FallbackContentDemo"> 
  <center> 
    <script> 
      angular.module('FallbackContentDemo', []) 
         .directive('myButton', function() { 
             return { 
               restrict:'E', 
               transclude:true, 
                scope:true, 
                template:  
               '<button style="cursor:wait;">' + 
                              '<ng-transclude>' + 
       '<b style="color:green;">Click Me!</b>' + 
                            '</ng-transclude>' + 
                            '</button>' 
                    }; 
                }); 
        </script> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <!-- fallback button content -->
        <my-button id="fallback"></my-button> 
        <!-- modified button content -->
        <br> 
        <my-button id="modified"> 
            <i style="color:blue;">Click Me!</i> 
        </my-button> 
    </center> 
</body> 
  
</html>

输出：



相关用法


注：本文由纯净天空筛选整理自jeetesh16大神的英文原创作品 AngularJS | ng-transclude Directive。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。