$範圍的指令

調用模板後，得到空我有一個嵌套的指令，這樣

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

$範圍的指令

回答

相關問題