拥有两个共享相同 DOM 元素的 Angular 控制器是一种不好的做法吗？答案

【问题标题】：Is it a bad practice to have two Angular controllers that shares same DOM elements?拥有两个共享相同 DOM 元素的 Angular 控制器是一种不好的做法吗？
【发布时间】：2014-01-31 08:30:09
【问题描述】：

想象一下我有这样的东西：

<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>

如您所见，控制器GlobalController 管理整个身体，而SpecificController 只控制subPart。

在这种情况下，div#one 可以访问GlobalController，但div#two 链接到GlobalController 和 SpecificController。

我的问题是知道这样做是否是一种不好的做法，因为我认为相同的 DOM 元素（例如 div#two）有 2 个控制器会导致冲突...

另外，如果这不是一个坏习惯，在这种情况下我应该注意什么？例如，我想我必须小心避免在两个控制器中具有相同的属性，对吧？

谢谢。

ps：我不确定是否有人问过这个问题。我多次看到“我可以在同一页面中有两次相同的控制器”的问题，但这不是我的问题。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

在我看来，这并没有什么错误，你只是表明你的控制器之间存在一个“继承”链，它允许对 DOM 的某些方面进行更精细的控制，这可能具有与整个页面无关。

您对共享属性是正确的，因为子控制器将为父控制器继承其属性：

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"
}

但是，为了避免数据属性的冲突，我会尝试在代码中使 SpecificController 确实继承自 GlobalController 的代码非常明显。

【讨论】：

事实上，我感觉我的div#two 无法与GlobalController 上的$scope.foo 属性交互。我正在尝试创建一个 JsFidlle 以确保，我将编辑我的问题...
为什么SpecificController 应该继承自GlobalController - 它不共享div#one？
@romaintaz div#two 继承 GlobalController 定义的任何属性，因为它是嵌套的 - jsfiddle.net/Yu8ZW

【解决方案2】：

我经常发现，如果您尝试将所有内容保存在单个控制器中，尤其是对于大页面，那么您的控制器的大小可能会变得难以管理，因此实际上我更喜欢使用父子控制器继承。请记住，当从子 DOM 元素中引用父属性时，您需要谨慎使用父属性命名策略，或者在需要引用时在子 DOM 中使用 $parent.parentproperty。

【讨论】：