Question

我知道如果我想创建一个可重复使用的项目，例如日期选择器，那么建议将其创建为指令。

但是，让我们说在我的主页上，我有一个欢迎部分，显示当天的报价，背景图片来自Rest服务。这应该是一个可以封装标记和控制器逻辑的指令吗？或者它应该是一个简单的AngularJs Controller，它绑定到我的index.html中的标记？

什么构成是否应该作为指令创建？

Answer 1

指令只是控制器的包装器。这意味着如果你有一个控制器，你可以使用它。但您也可以使用相同的控制器作为指令的控制器，而不是link函数使用controller。

这允许绘制清楚的行在哪里使用指令以及在何处使用控制器。

如果我们想重现一段HTML标记的逻辑，我们必须使用Controller。当我们想要使用相同的$scope赋值时，$scope中的相同函数，...但HTML标记对于我们使用此控制器的其他每个地方总是不同。

当我们在指令的控制器和相同的HTML标记中具有相同的逻辑时，我们必须使用指令。

所以在你的情况下，它绝对是一个指令。

这当然是我自己的常识，可能并不理想。

Answer 2

实现此功能需要三件事：

AngularJS模板a.k.a.标记显示带有图像旁边的引号。
AngularJS服务包含REST调用，以便从服务器获取上述详细信息。
AngularJS控制器使用AngularJS服务将数据反馈回模板（第1点），以便在每次休息呼叫后相应地更新数据。

所以事实是你甚至可以在没有编写AngularJS指令的情况下实现这一目标，但如果你需要在许多地方复制相同的功能，那该怎么办呢？从这个意义上说，你可能不得不在其他地方复制相同的模板，这将再次需要一个单独的控制器来使用相同的服务（因为不建议在DOM中多次使用相同的控制器，这是一种不好的做法）。

使用Directive API，您可以将标记放在指令模板中，并在指令控制器中使用该服务来呈现UI。所以下次如果你想要多个小部件实例，你只需要注入指令，就是这样 - 其余的工作没有任何问题。

App = angular.module('App', []);
App.directive('welcomeQuote', function(QuoteService) {
  return {
    restrict: 'E',
    template: '<div><img ng-src="{{quote.img}}" /><span ng-bind="quote.title"></span></div>',
    controller: function(scope) {
      // returns {img: 'angular.png', title: 'AngularJS';
      QuoteService.fetch().then(function(data) {
        scope.quote = data;
      });
    }
  }
});
App.factory('QuoteService', function($http) {
  return function() {
    fetch: function() {
      return $http.get('http://quote-server.com/new')
    }
  };
});

最后，您可以将小部件用作：

<welecome-quote></welcome-quote>

AngularJS - 制定或不制定指令

2 个答案: