【问题标题】:Why do we need directives in angularJS?为什么我们需要 angularJS 中的指令?
【发布时间】:2016-12-11 16:07:22
【问题描述】:

我是 angularJS 的新手,所以阅读本文的人可能会觉得这是一个愚蠢的问题。

但谷歌返回的问题的答案实际上并没有回答我的问题。

下面的链接说服务应该在应用程序增长时使用。

Reference

很好。如果是这样,服务将是更大应用程序的选择。

据我了解,Directive 只不过是一个可用于 DOM 操作的角块。

既然我可以在服务中做同样的事情,我为什么要选择这个?

每当我需要执行数据库操作并将数据填充回 html 控件时,是否应该使用指令?

如果我想从 Angular 进行 REST API 调用,我应该在哪里编写这些方法?

【问题讨论】:

    标签: angularjs angularjs-directive


    【解决方案1】:

    AngularJS 指令 允许我们从字面上“指导”AngularJS 将用户定义的行为与 DOM 元素相关联——在 Web 应用程序中创建和使用自定义元素时提供了极大的灵活性。

    然而,服务是服务。您制作服务来处理您不想在每个控制器中重复的重复和乏味的任务(应用程序代码与视图直接交互的部分)。

    如果我想从 Angular 进行 REST API 调用,我应该在哪里写 那些方法?

    嗯,

    您可以看到内置服务,例如 ng-resources,这有助于轻松地对服务器进行 api 调用,即 ajax 调用。

    【讨论】:

    • 这个的执行顺序是什么?是否是模块>>服务>>指令,反之亦然?哪个会调用 REST API?
    • @user1357872 没有顺序,你不必使用指令进行API调用,你可以使用服务。假设您想进行一些 DOM 操作。假设您想使用一个指令元素打印 'Hello world' 5 次。你可以去指令
    • 你需要在服务内部编写相应的方法
    【解决方案2】:

    您可以使用指令来创建您自己的 HTML 元素、属性、类或注释,以实现一些特殊的功能。你甚至可以让其他人重复使用这个指令。

    假设,我想要一个指令,只要我点击输入框就自动选择所有文本。让我们将此指令称为select-all。假设这是一个属性指令。

    如果我使用这个指令,我的 DOM 会是这样的

    <input type='text' select-all></input>
    

    就是这样。你不需要知道select-all 的代码在哪里。您不必担心与它的工作方式相关的任何事情。只需在您想要的任何元素中插入属性select-all,它就会像魔术一样工作。

    这就是指令的美妙之处。您可以使用它来创建可重用的 Web 组件。

    【讨论】:

    • 感谢您的回答。请帮助我了解我应该在哪里编写方法,如果我想从 Angular 进行 REST API 调用?
    • $http 服务用于进行 REST 调用。这是一项核心服务,因此您无需安装任何库。像任何其他服务一样,您必须 1. 在您的控制器或服务中注入 $http 服务 2. 调用 $http 服务中的方法来制作您的 REST api。查看 $http 服务的文档。 docs.angularjs.org/api/ng/service/$http
    • 非常感谢您的澄清。
    【解决方案3】:

    除了提供的答案之外,在考虑创建新指令时,请考虑创建一个组件:

    • 配置稍微容易一些
    • 实施了一些最佳做法
    • 推广基于组件的架构
    • 为未来做准备:更兼容 Angular 2 的工作方式

    更多信息可在components documentation 中找到,您可以在其中了解如何逐步构建组件。

    要调用 REST API,您可以使用 $http 服务。可以在here 找到文档。内容很详尽,所以我建议从here 快速开始。

    【讨论】:

      【解决方案4】:

      这是使用Service 和Controller 进行REST 调用的示例。

      // the controller
      (function(ng, undefined){
              "use strict";
                  ng.module("app").controller('MyController', ['$scope',  'MyService', 
                      function($scope, MyService){
      
                          $scope.myModel = {};// where you store your data
      
                          // call the service to retrieve data
                          MyService.getResourcesDataById( 187, function (result) {
                              $scope.myModel.data = result; // assign result
                          });
                  }]);
      })(angular);
      
      // the service
      (function(ng, undefined){
          "use strict";
              ng.module('app').factory("MyService", ["$http", function($http){
      
                  return {
                      getResourcesDataById : function(pId, fct){
                          // make the call
                          $http({
                              method: 'GET',
                              url: '/resources/data',
                              params: {
                                  id : pId                        }
                          })
      
                          .then(function(data){
                              // callback function with the result
                              fct(data);
                          })
                      }
                  }
              }])
      
      })(angular);
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2019-06-09
        • 1970-01-01
        • 2020-12-03
        • 2014-06-18
        • 2017-02-26
        • 2011-04-03
        • 2017-07-27
        相关资源
        最近更新 更多