仅仅为了拥有多个控制器而创建 Div 是一种不好的做法吗？

Question

在 HTML 中创建 div 只是为了能够拥有多个控制器是一种不好的做法吗？

因为你不能把它们放在一起，所以使用多个指令和单独的控制器的方法似乎是一种 hack，但如果我错了请纠正我。

所以我有 2 个控制器 - 一个叫做 ConvertController，另一个叫做 YouTubeLinkUIController。

第一个的职责是点击我的 Web API 控制器并将给定的 YouTube link 转换为音频。

第二个的职责是控制某些 UI 功能。

为了遵循单一职责原则，我将它们分成了2个不同的控制器，这就是问题所在。

我的最后一次提交，特别是 Index.cshtml 显示了完整的代码，但为了不造成这种混乱，我将把它缩写为 post。

https://github.com/AvetisG/TubeToTune/commit/e68ba42f20498c9a4e032328aed6d68c27b9b2cb

<div class="container" ng-app="TubeToTuneApp" ng-controller="YouTubeLinkUIController">

    ... more code

    @*Scoping the Convert Controller*@
    <div ng-controller="ConvertController">

        ... more code

    </div>
</div>

Answer 1

使用divs\spans和嵌套结构并使用ng-controller绝对没问题。

当您以某种方式将 ng-controller 添加到 html 元素时，您正在创建具有模型视图和控制器的组件。

一个复杂的组件可以有嵌套的子组件来执行非常具体的功能，并且在某种程度上你可以用 ng-controller 来划分这些部分。更进一步，如果您将这些组件转换为指令，使用它们自己的控制器 + 模板（视图）并接受来自数据源的模型，那么您就有了一个可以在整个应用程序中使用的可重用组件。

Answer 2

查看您的 github 提交消息，您似乎拆分了控制器，因为您不想在 ui 控制器中包含太多代码。

这是 angular 服务正常运行的完美示例。您可以将服务想象成没有所有开销的控制器，并且可以轻松地从另一个控制器调用

Angular Service Documentation

你应该做的是定义一个调用你的 api 然后

的服务

angular.module('youTube', [])

.controller('YouTubeLinkController', ['$scope', 'convert',
  function($scope, convert) {
    $scope.convertLink = function() {
      $scope.convertMessage = convert.convertYoutube()
    };
  }
])

.factory('convert', [
  function() {
    var convertService = {};

    convertService.convertYoutube = function(data) {
      //Make api call
      return "Conversion Done";
    }

    return convertService;
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="youTube">
  <div ng-controller="YouTubeLinkController">
    {{convertMessage}}
    <button ng-click="convertLink()">Convert</button>
  </div>
</body>

当然，您应该在其自己的页面中定义服务。这样控制器仅用于与 UI 交互。它也解决了你的问题

Answer 3

对我来说，您的 ConvertController 看起来更像是应该作为服务而不是控制器来编写。这仍然遵循单一职责，但可能更接近您的预期功能：UI 控制器中的功能和视图数据，服务中的业务逻辑。

也就是说，在一个视图上有两个控制器可能不是坏习惯，这会导致在以下情况下混淆标记：

<button type="submit" class="btn btn-xlarge btn-warning btn-block" ng-if="AreThereYouTubeLinks() == true" ng-click="ConvertToTunes(YouTubeLinks)">

您可能知道 AreThereYouTubeLinks()、ConvertToTunes() 和 YouTubeLinks 属于哪个控制器，但从长远来看这会造成混淆（并可能导致范围问题-绑定变量，如 YouTubeLinks.

幸运的是，有一个语法可以帮助清除这个 up-Controller As - 并且 Todd Motto wrote an excellent article 解释了如何使用它以及它可以帮助解决什么问题。简而言之，它会变成这样：

<div ng-controller="MainCtrl">
  {{ title }}
  <div ng-controller="AnotherCtrl">
    {{ title }}
    <div ng-controller="YetAnotherCtrl">
      {{ title }}
    </div>
  </div>
</div>

在此：

<div ng-controller="MainCtrl as main">
  {{ main.title }}
  <div ng-controller="AnotherCtrl as another">
    {{ another.title }}
    <div ng-controller="YetAnotherCtrl as yet">
      {{ yet.title }}
    </div>
  </div>
</div>

在你的情况下，你最终会得到这个更安全、更容易理解的标记：

<div class="container" ng-app="TubeToTuneApp" ng-controller="YouTubeLinkUIController as linkCtrl">

    ... more code

    @*Scoping the Convert Controller*@
    <div ng-controller="ConvertController as converter">

        <button type="submit" class="btn btn-xlarge btn-warning btn-block" ng-if="linkCtrl.AreThereYouTubeLinks() == true" ng-click="converter.ConvertToTunes(linkCtrl.YouTubeLinks)">

    </div>
</div>

如果您要坚持使用两个控制器，您可能需要考虑花时间熟悉 Controller As。

仅仅为了拥有多个控制器而创建 Div 是一种不好的做法吗？

Is it bad practice to create Divs just to have multiple controllers?

html

scoping

angularjs

angularjs-scope

asp.net-web-api2