$范围的指令

调用模板后，得到空我有一个嵌套的指令，这样

app.directive('grid', ['$log', '$http', function ($log , $http) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     //template: '<span></span>', //i uncomment this line 
     controller: function ($scope, $element, $attrs){ 
      var swColumns = []; 
      this.setColumns = function (columns) { 
       swColumns = columns; 
       $log.log('grid controller'); 
       $log.log(columns); 
       $scope.swColDefs = columns; 
       $log.log($scope.swColDefs); 
      }; 

      this.getColumns = function() { 
       return swColumns; 
      }; 
     }, 
     link: function (scope, element, attrs, gridController) { 
      $log.log('grid link'); 
      $log.log(gridController.getColumns()); 
      $log.log(scope.swColDefs); 
     } 
    }; 
}]); 
app.directive('gridColumns', ['$log', function ($log) { 
    return { 
     restrict: 'E', 
     require: ['^grid', 'gridColumns'], 
     controller: function() { 
      var columns = []; 
      this.addColumns = function (column) { 
       columns.push(column); 
      }; 
      this.getColumns = function() { 
       return columns; 
      }; 
     }, 
     link: function (scope, element, attrs, controllers) { 
      var gridController = controllers[0]; 
      var gridColumnsController = controllers[1]; 
      gridController.setColumns(gridColumnsController.getColumns()); 
     } 
    }; 
}]);

每一件事情是确定的，直到我在此之后，swColDefs电网连接功能成了一句注释掉电网指令模板array 我的代码有什么问题？

<grid> 
    <grid-columns> 
    </grid-columns> 
    ... 
</grid>

，我使用它像这样

来源

2015-06-21 davmszd

你能创建一个相同的plunkr /小提琴吗？ –

我的回答是否解决了您的问题？如果没有，请在评论中澄清。 –

我做了你所说的和我的孩子指令中的一点点变化，问题解决了谢谢@NewDev – davmszd

我已经在网格模板这样做解决了这个问题首先我添加一个div NG-transclude到t他的模板 secod transclude：在grid指令中为true

app.directive('grid', ['$log', '$http', function ($log , $http) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     transclude:true,//my change 
     template: '<span> 
        <div ng-transclude>//my change 
        </div> 
        </span>', 
     controller: function ($scope, $element, $attrs){ 
      var swColumns = []; 
      this.setColumns = function (columns) { 
       swColumns = columns; 
       $log.log('grid controller'); 
       $log.log(columns); 
       $scope.swColDefs = columns; 
       $log.log($scope.swColDefs); 
      }; 

      this.getColumns = function() { 
       return swColumns; 
      }; 
     }, 
     link: function (scope, element, attrs, gridController) { 
      $log.log('grid link'); 
      $log.log(gridController.getColumns()); 
      $log.log(scope.swColDefs); 
     } 
    }; 
}]);

来源

2015-06-25 05:44:20 davmszd

虽然这个问题没有明确规定，我假设你正在使用您的指令，像这样：

<grid> 
    <grid-columns> 
    </grid-columns> 
    ... 
</grid>

但因为你”重新指定<grid>的模板，Angular将删除内容并设置模板。因此，gridColumns指令从不编译，并且link函数从不运行。

这是在grid需要transclusion的地方。 Transclusion将内容从DOM中取出，编译它（在编译阶段），然后允许您将它与所需的任何范围关联并将其放入内容中。

从您的问题中不清楚指令需要链接哪个范围gridColumns以及它是否有任何可视化组件。

对于一个简单的transclusion情况下，这可以用<ng-transclude>在grid模板完成：

transclude: true, 
template: "<span>whatever</span><div ng-transclude></div>" // template of grid

或者，超过范围和位置更精确的控制，你可以使用transclude功能（作为第五传递参数为link功能）：

transclude: true, 
template: "<span>whatever</span>", 
link: function(scope, element, attrs, gridController, transclude){ 
    transclude(function(transcludedContent){ 
    // place the content where needed, if at all 
    }); 
}

来源

2015-06-21 17:09:56

$范围的指令

回答

相关问题