[英]AngularJS Use child directives as directive data
To make it short...i need to read child directive as data in the parent directive i got something like: 简而言之...我需要将子指令作为父指令中的数据读取,我得到如下信息:
<ng-table url="http://api.com/getArchive1" editUrl="http://api.com/editArchive1" etc>
<header name="id" paramName="user_id"><header/>
<header name="name" etc></header>
<header name="age" etc></header>
</ng-table>
So i got something like (WARNING, COFFEESCRIPT :P): 所以我得到了类似(警告,咖啡:P):
table.directive 'ngTable', (Table) ->
restrict : "E"
templateUrl : "table.html"
link : (scope, element, attrs) ->
scope.grid = new Table(attrs) //this is a class
//other stuff
So how do i create the other directive and get in this link function something like a array of headers?? 那么,如何创建另一个指令并在此链接函数中获取类似于标题数组的内容呢?
You can actually deep dive into directive controllers and "transclusions". 实际上,您可以深入研究指令控制器和“包含”。
To access parent controller you can use require
option. 要访问父控制器,您可以使用
require
选项。
.directive 'parent', ->
controller: ->
@addHeader = (header) => #do add header
.directive 'child', ->
require: '^parent'
link: (scope, el, attr, parent) ->
parent.addHeader 'from child'
But you need to make sure your child link function actually ran. 但是,您需要确保您的子链接功能实际运行。
For example (WARNING JAVASCRIPT!!! :) you can use transclude
option. 例如(WARNING JAVASCRIPT !!! :),您可以使用
transclude
选项。 Sophisticated Example . 复杂的例子 。
.directive('myTable', function() {
return {
restrict: 'E',
controller: function() {
var headers = []
this.headers = headers
this.addHeader = headers.push.bind(headers)
},
template: `
<table>
<thead>
<tr>
</tr>
</thead>
</table>
`,
transclude: {
// transclude all myHeaders into headers slot
headers: 'myHeader' // transclude (how this is a real word at all?)
},
link: function(scope, el, attrs, ctrl, transclude) {
var headerRow = el.find('thead').children('tr')
// append all headers into thead wrapping with th
transclude(function(headers) {
[].forEach.call(headers, header => {
var cell = angular.element('<th></th>')
cell.append(header)
headerRow.append(cell)
})
}, headerRow, 'headers')
console.log(ctrl.headers) // headers were populated here
}
}
})
.directive('myHeader', function() {
return {
restrict: 'E',
require: '^myTable',
transclude: true, // ohh more transclusions
template: '<span ng-transclude></span>',
link: function(scope, el, attrs, myTable) {
myTable.addHeader(attrs.name) // report to myTable
}
}
})
<my-table>
<my-header name="First"> First Header </my-header>
<my-header name="Second"> Second <span style="color:red;">Header</span> </my-header>
</my-table>
The only way I could think about is using the element parameter in your link function. 我能想到的唯一方法是在链接函数中使用element参数。 You could use jqLite methods with it to get all the elements with header tag inside your ng-table directive.
您可以将jqLite方法与之结合使用,以在ng-table指令中获取带有header标签的所有元素。
If I'm correct, you could not access child scopes from your parent scope, so using jqlite is probably the only option. 如果我是对的,则无法从父范围访问子范围,因此使用jqlite可能是唯一的选择。 see AngularJS - Access to child scope
参见AngularJS-访问子范围
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.