Question

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

既然你不能将它们放在一个中，那么使用单独控制器的多个指令的方法看起来像是一个黑客，但如果我错了，请纠正我。

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

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

第二个责任是控制一些UI功能。

为了遵循单一责任原则，我将它们分成两个不同的控制器，其中存在问题。

我的最后一次提交，特别是Index.cshtml显示了完整的代码，但是为了不使这个混乱，我将在这篇帖子中删除它。

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

查看你的github提交消息，看起来你拆分了控制器，因为你不想在你的ui控制器中有太多的代码。

这是角度服务有序的完美示例。你可以想象一个像控制器这样的服务而没有所有开销，并且可以从另一个控制器轻松调用

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 2

使用divs \ spans和嵌套结构并使用ng-controller非常好。

当您使用模型视图和控制器创建组件的方式将ng-controller添加到html元素时。

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

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。

幸运的是，有一种语法可以帮助清除这个 - 控制器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只是为了拥有多个控制器是不好的做法吗？

3 个答案: