$postLink 成分/指示 angular, 推出太早了
更新:
我指定了这个问题的奖励。 我不是在寻找卡其色或旁路路径。 我正在寻找一种官方访问方式 dom 在组件中 angular, 并解释为什么我看到的行为 /$postLink 在开始前工作/, 它似乎与官方文件相反。
官方文件宣布 /
https://docs.angularjs.org/guide/component
/:
$postLink//- 此控制器及其子公司的元素相关联。 喜欢功能 post-link, 此钩子可用于配置事件处理程序。 DOM 并执行直接操纵 DOM
原始问题:
这里有一个例子问题 - >
http://plnkr.co/edit/rMm9FOwIm ... eview
我使用一个组件 angular 我想改变 dom 在功能中 post link, 但它不起作用,似乎函数在模板真的准备好之前发起了太早 dom 毕竟处理后 angular.
到页面 html 我有这个:
该组件定义为:
在组件模板中我有它:
/绑定本身有效,毫无疑问。 最终,在 html 表ID相等 'foo', 正如预期的那样/.
在控制器中,我有这样的东西:
调试时,我看到执行函数时 $postLink 表是b。 dom, 但她的属性 id 仍然
反而
, 所以
没有什么能找到任何东西。 这似乎与文件相矛盾。
我错过了什么? 是否有另一种方法可以访问 dom 在组件中?
更新 2:
今天我意识到,由于参考指令的通常函数出现了相同的问题,因此不限于组件。 因此,显然,我误解了价值 "do direct DOM manipulation" - 功能 link 适用于分开的元素 dom, 因此,使用设施
选择器是无用的。
</table>
我指定了这个问题的奖励。 我不是在寻找卡其色或旁路路径。 我正在寻找一种官方访问方式 dom 在组件中 angular, 并解释为什么我看到的行为 /$postLink 在开始前工作/, 它似乎与官方文件相反。
官方文件宣布 /
https://docs.angularjs.org/guide/component
/:
$postLink//- 此控制器及其子公司的元素相关联。 喜欢功能 post-link, 此钩子可用于配置事件处理程序。 DOM 并执行直接操纵 DOM
原始问题:
这里有一个例子问题 - >
http://plnkr.co/edit/rMm9FOwIm ... eview
我使用一个组件 angular 我想改变 dom 在功能中 post link, 但它不起作用,似乎函数在模板真的准备好之前发起了太早 dom 毕竟处理后 angular.
到页面 html 我有这个:
<my-grid grid-id="'foo'"></my-grid>
该组件定义为:
appModule.component/'myGrid',{
controller: gridController,
bindings: {
"gridId": "<",
},
templateUrl: 'gridTemplate'
}/;
在组件模板中我有它:
<table id="{{$ctrl.gridId}}">
...
/绑定本身有效,毫无疑问。 最终,在 html 表ID相等 'foo', 正如预期的那样/.
在控制器中,我有这样的东西:
function gridController/$scope, $compile, $attrs/ {
console.log /"grid id is: " + this.gridId/; // 'foo'
this.$postLink = function// {
var elem = document.getElementById/this.gridId/;
// do something with elem, but elem is null
}
}
调试时,我看到执行函数时 $postLink 表是b。 dom, 但她的属性 id 仍然
{{$ctrl.gridId}}
反而
foo
, 所以
document.getElementById//
没有什么能找到任何东西。 这似乎与文件相矛盾。
我错过了什么? 是否有另一种方法可以访问 dom 在组件中?
更新 2:
今天我意识到,由于参考指令的通常函数出现了相同的问题,因此不限于组件。 因此,显然,我误解了价值 "do direct DOM manipulation" - 功能 link 适用于分开的元素 dom, 因此,使用设施
document
选择器是无用的。
</table>
没有找到相关结果
已邀请:
2 个回复
詹大官人
赞同来自:
这是正确的。 在其控制器的元素及其子元素相关联后调用它。 这并不意味着您将立即看到指令的结果。 也许他会导致
并在他来就立即插入结果。 也许这是一个观察者的注册,反过来,这反过来建立了结果,
大多数内置指令如何
Angular .
您案例中的主要问题是 , 你想表演什么 DOM 操作后
编译插值
, 甚至更好,在他们的注册观察者管理一次运行后。
很遗憾,
官方方法
不这样做。 尽管如此,有些方法可以做到这一点,但你不会发现他们在文档中列出。
两个流行的方式
编译插值后启动功能
:
使用
不延误/ 默认 0/:
使用
, 提供了这一点
https://docs.angularjs.org/api ... ement
在您的情况下,您可以更好地使用Observer从给定的元素后立即启动函数 ID 存在:
最后,在我看来,我相信,只要你需要等待插值或某些指令要插入意义,你就不会遵循
建筑物的方法
Angular . 在您的情况下,为什么不创建新组件
, 这需要
作为父母,并在那里添加相应的逻辑。 因此,每个组件的责任要更好地确定,并且更容易检查。
小明明
赞同来自:
控制器生命周期的每个事件 / 指令被称为内部 $apply., 所以 DOM 仅更新以反映更改后
https://docs.angularjs.org/gui ... -loop
$digest .
功能 post link 它在连接一切都会之后开始,但它是
http://odetocode.com/blogs/sco ... .aspx
DOM 更新以反映任何绑定,因为它是循环内部启动的最后一个函数 $digest. 它的意思是 , 什么试图要求 DOM 对于受约束力影响的任何东西,它都不工作 /例如,
或者,在您的情况下,相关价值/. 但是,正如他们在文件中所说的那样,绑定 DOM 它已经在运行,因此创建源模板,可以更改。
您需要请求 DOM 应用绑定后,您需要在完成当前循环后运行代码。 $digest. 这意味着使用
延迟 0, 这将是
http://blog.brunoscopelliti.co ... ring/
$digest .