Question

到目前为止，我一直在使用javascript而不使用AngularJS开发小部件。方法始终相同：小部件提供API，允许客户端从应用程序的任何部分更改他。方法没有改变，但现在我需要使用AngularJS。我有下一个解决方案，我想知道你的选择：

angular.module("app", ["myCustomWidget"])

.controller("MainCtrl", ["$scope", "myCustomWidgetService", function($scope, myCustomWidgetService) {
  $scope.myCustomWidgetService = myCustomWidgetService;
  $scope.changeMyCustomWidget = function() {
    $scope.myCustomWidgetService.message = "This message was written by MainCtrl";
  }
}]);


/**
WIDGET
*/
angular.module("myCustomWidget", [])

.factory("myCustomWidgetService", function() {
  var myCustomWidgetService = {};
  myCustomWidgetService.message = "This is the default message inside the Service";
  return myCustomWidgetService;
})

.directive("myCustomWidgetDirective", [function() {
  return {
    bindToController: true,
    controllerAs: "$ctrl", // I dont know where it is used but angular fails if it is not present -> https://docs.angularjs.org/error/$compile/noident
    controller: "myCustomWidgetCtrl",
    scope: {},
    template: '<button ng-click="changeMyCustomWidget()" type="button" name="button">Click to change from directive</button><p>{{myCustomWidgetService.message}}</p>'
  }
}])

.controller("myCustomWidgetCtrl", ["$scope", "myCustomWidgetService", function($scope, myCustomWidgetService) {
  $scope.myCustomWidgetService = myCustomWidgetService; //Use the Service as a part of the scope
  $scope.changeMyCustomWidget = function() {
    $scope.myCustomWidgetService.message = "This message was written by myCustomWidgetCtrl";
  }
}]);

http://plnkr.co/edit/L58WpCkGyYionGfoeewd

你怎么看？使用服务作为指令控制器的一部分是个好主意吗？

Answer 1

您应该将服务注入控制器。他们生活中的全部目的是处理控制器的数据，控制器是大多数MVC应用程序的中间管理者。

您的用例是最常见的用例之一;你让你的控制器走向你的服务然后去，“嘿，请给我看这个消息。”然后，另一个控制器走上前，要求服务显示不同的消息。依此类推。

你可能还有一个控制器走向服务 - 可能穿着风衣和浅顶软呢帽 - 并且带着嘶哑的低语，去吧“嘿，请把这些数据留给我。我有一个朋友要来捡起来。不，这一切都很酷，在水平上。“而这项服务在其生命中经历了大量的尝试，确切地知道了这样做的协议。把数据放在这个架子上;翻开这盏灯;抵制alert(cops)的冲动。后来，另一个控制器 - 也穿着风衣和软呢帽，但这次它是米色而不是黑色 - 走了，拿走数据，点头，然后消失在那个晚上。

在这两种情况下，该服务都不知道它在做什么的方式或原因;这是控制器的工作。类似地，控制器一旦完成任务就不知道如何或为什么要做任何事情;它只是希望事情有效。

希望这有帮助。

如何为你的角度指令提供Api？

1 个答案: