自定義指令 - 在父指令中包含子指令時不顯示

注意：ui-grid是我的自定義網格的名稱。對此感到抱歉。自定義指令 - 在父指令中包含子指令時不顯示

我有一個自定義指令，將有一個孩子自定義指令，並將在HTML中以這種方式調用。

<ui-grid resource="/api/data.json"> 
      <ui-gridcolumns> 
      </ui-gridcolumns> 
     </ui-grid>

當孩子指令父指令中封閉，控制檯語句不打印，但在孩子的指令是父指令之外，它打印的console.log就好了。任何有關如何使它與父指令中的子指令一起工作的深入瞭解。

父指令：

module.exports = function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'app/ui-grid/grid.template.html', 
     link: function (scope, element, attrs) { 
      console.log('linked Grid'); 
     }, 
     controller: ['$scope', function ($scope) { 
      $scope.onthescreen = 'test value'; 
     }] 
    }; 
};

兒童指令：

module.exports = function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'app/ui-grid/gridcolumns/grid.columns.template.html', 
     link: function (scope, element, attrs) { 
      console.log('linked Grid Columns'); 
     }, 
     controller: ['$scope', function ($scope) { 
      console.log('calling Grid Columns'); 
     }] 
    }; 
};

整個代碼庫是在GIT中以供參考。

https://github.com/eshrinivasan/angular-gulp-browserify-boilerplate

來源

2016-10-02 neelmeg

，你必須使用'transclusion'，這樣子元素纔會變成w進入父母的模板。否則，父模板會覆蓋元素內容，並且子元素基本上都會從DOM中移除。 – Claies

也，你可能想要考慮你的命名在這裏;很多人可能會對你的問題感到困惑，因爲已經存在一個角度庫[ui-grid]（http://ui-grid.info/），它可能看起來好像你試圖用這個庫來做一些事情而不是用你自己的定製指令。 – Claies

以獲得所需的行爲使用transclusion：

配置：

restrict: 'E', 
templateUrl: 'app/ui-grid/grid.template.html', 
link: function (scope, element, attrs) { 
    console.log('linked Grid'); 
}, 
controller: ['$scope', function ($scope) { 
    $scope.onthescreen = 'test value'; 
}], 
transclude: true

模板

和地方：

<div ng-transclude> 
    child directives will be placed here 
</div>

如果你希望你的父母把它包起來的孩子

來源

2016-10-02 18:46:43

自定義指令 - 在父指令中包含子指令時不顯示

回答

相關問題