嗨,请解释以下三种情况的原因,因为我无法知道为什么会发生这种情况 -
1)
<div ng-controller="myctrl">
<p>something for DOM manipulation</p>
</div>
2)我写的路线
('someroute',{
templateUrl : "mytemplate",
controller : "myctrl"
});
MyTemplate的:
<div>
<p>something for dom manipulation</p>
</div>
3)
<div ng-include="mytemplate" ng-controller="myctrl"></div>
模板与上述相同
上述所有场景中的控制器是相同的,在所有这些场景中,我只是尝试通过编写angular.element(&#39; p&#39;)来选择DOM的p标签。但这似乎不一致。它在第二种情况下运行良好,它在第三种情况下无法工作,我不确定第一种情况。有人可以解释哪种方法最适合dom选择/操作,因为我必须在这个方面添加一个类&#39; p&#39;悬停时标记。
我不明白哪个被初始化的第一个控制器或部分?
答案 0 :(得分:0)
不鼓励在控制器内部操作DOM。引自Best Practice - Dom Manipulations:
Dom操作不应存在于控制器,服务或其他任何地方,而应存在于指令中。
如果您只需要在悬停时设置元素样式,那么使用p:hover
CSS选择器就足够了,而无需触及DOM。如果你真的想上课,ng-class
和ng-mouseover
可以帮到你。
对于更复杂的场景,您可能希望编写自己的指令。您可以查看上面的文章,获取指南。
从第一种情况加载订单: HTML优先。解析HTML后会加载ngController
等指令。因此,加载控制器时HTML已经存在。
第二种情况的加载顺序:我不确定。您可以查看ngRoute或uiRouter的文档,具体取决于您使用的路由器。
第三种情况的执行顺序:控制器优先。指令ngController
的优先级高于ngInclude
指令。因此,首先加载控制器。
该指令在优先级500执行。
该指令在优先级400执行。