AngularJS | ng-transclude指令

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

示例1：

  

    
    
  

  

    
      
        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';
           }]);
      
        GeeksforGeeks
        
            
            
            
              {{text}}
        
    

  

输出：

示例2：

  

    
    
      simpleTranscludeExample
  
  
    
  

  

   
      
        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';
                }]);
        
        GeeksforGeeks
        
            
            
            
            
            
              {{text.toUpperCase();}}
        
    

  

输出：

示例3：

  

    
    ng-transclude
  
    
  
  

  

  
    
      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>'
                    };
                });
        
        GeeksforGeeks
        
        
        
        
        
            Click Me!
        
    

  

输出：