让两个Angular控制器共享相同的DOM元素是不好的做法？

Question

Imagine I have something like this: 想象一下，我有这样的事情：

<html ng-app="myApp">
    ...
    <body ng-controller="GlobalController">
        <div id="one">...</div>
        ...
        <div ng-controller="SpecificController" id="subPart">
            <div id="two">...</div>
            ...
        </div>
        ...
    </body>
</html>

As you can see, the controller GlobalController manages the whole body, while SpecificController only controls the subPart . 如您所见，控制器GlobalController管理整个主体，而SpecificController仅控制subPart 。

In that case, div#one can access to the GlobalController , but div#two is linked to GlobalController and SpecificController . 在这种情况下， div#one可以访问GlobalController ，但div#two链接到GlobalController 和 SpecificController 。

My question is to know if it's a bad practice to do that, because I imagine that having 2 controllers for the same DOM elements (such as div#two ) can lead to conflicts... 我的问题是要知道这样做是否是一种不好的做法，因为我认为对于相同的DOM元素（例如div#two ）有2个控制器会导致冲突......

Also, if it's not a bad practice, what should I take care in such situation? 此外，如果这不是一个坏习惯，在这种情况下我应该注意什么？ For example, I imagine that I have to be carefull to avoid having same properties in both controllers, right? 例如，我想我必须小心避免在两个控制器中具有相同的属性，对吧？

Thanks. 谢谢。

ps: I'm not sure if this question has been asked. ps：我不确定是否有人问这个问题。 I see several times the question "can I have the same controllers twice in the same page", but that's not my question. 我多次看到这个问题“我可以在同一页面上两次使用相同的控制器”，但这不是我的问题。

Answer 1

There's nothing wrong with this in my opinion, you are just showing that there is an "inheritance" chain between your Controllers and it allows for more granular control over certain aspects of the DOM which may have nothing to do with the page as a whole. 在我看来，这没有任何问题，你只是表明控制器之间存在“继承”链，它允许对DOM的某些方面进行更细粒度的控制，这可能与整个页面无关。

You are correct about sharing properties, as the child controller will inherit its properties for the parent Controller: 您对共享属性是正确的，因为子控制器将继承其父Controller的属性：

function ParentCtrl($scope) {
    $scope.test = "One";
}

function ChildCtrl($scope) {
    console.log($scope.test); // Logs "One";
    $scope.test = "Two"; // We've re-defined the variable as "Two"
}

However, I would try to make it blindingly obvious in the code that SpecificController does indeed inherit from GlobalController in order to avoid collisions of data properties. 但是，我会尝试在代码中SpecificController ， GlobalController确实从GlobalController继承以避免数据属性的冲突。

Answer 2

I have often found that if you try to keep everything in a single controller, especially for large pages, then the size of your controllers can become unmanageable, so its actually my preference to use parent - child controller inheritance. 我经常发现，如果你试图将所有内容保存在单个控制器中，特别是对于大页面，那么控制器的大小可能变得无法管理，所以实际上我更喜欢使用父子控制器继承。 Just keep in mind that when referring to parent properties from child DOM elements, you need to be cautious of you parent property naming strategy or use $parent.parentproperty in the child DOM when you need to refer. 请记住，当从子DOM元素引用父属性时，您需要谨慎使用父属性命名策略，或者在需要引用时在子DOM中使用$ parent.parentproperty。

让两个Angular控制器共享相同的DOM元素是不好的做法？

问题描述

2 个解决方案

解决方案1
4 已采纳 2014-01-31 08:41:30

解决方案2
0 2014-01-31 09:20:43

让两个Angular控制器共享相同的DOM元素是不好的做法？

问题描述

2 个解决方案

解决方案1 4 已采纳 2014-01-31 08:41:30

解决方案2 0 2014-01-31 09:20:43

解决方案1
4 已采纳 2014-01-31 08:41:30

解决方案2
0 2014-01-31 09:20:43