什么是初始化 - 控制器或部分/ HTML?

时间:2015-09-09 07:01:27

标签: javascript angularjs html5

嗨,请解释以下三种情况的原因,因为我无法知道为什么会发生这种情况 -

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;悬停时标记。

我不明白哪个被初始化的第一个控制器或部分?

1 个答案:

答案 0 :(得分:0)

不鼓励在控制器内部操作DOM。引自Best Practice - Dom Manipulations

  

Dom操作不应存在于控制器,服务或其他任何地方,而应存在于指令中。

如果您只需要在悬停时设置元素样式,那么使用p:hover CSS选择器就足够了,而无需触及DOM。如果你真的想上课,ng-classng-mouseover可以帮到你。

对于更复杂的场景,您可能希望编写自己的指令。您可以查看上面的文章,获取指南。

从第一种情况加载订单: HTML优先。解析HTML后会加载ngController等指令。因此,加载控制器时HTML已经存在。

第二种情况的加载顺序:我不确定。您可以查看ngRouteuiRouter的文档,具体取决于您使用的路由器。

第三种情况的执行顺序:控制器优先。指令ngController的优先级高于ngInclude指令。因此,首先加载控制器。

引自ngController documentation

  

该指令在优先级500执行。

引自ngInclude documentation

  

该指令在优先级400执行。