个人中心
gpt4 book ai didi

javascript - Angular Directive(指令) $http. http响应前后

转载 作者：行者123 更新时间：2023-11-30 12:24:41 25 4
gpt4 key购买 nike

简单的事情..

<my-directive info-key="total_users"></my-directive>

结果:<div>You asked for {{ infoKey }}, you get {{ apiValue }}</div>

现在的问题是，在 API 响应之前，我想在那里添加一些 html。

例如<div You asked for {{ infoKey }}, you get <small>pending..</small></div>然后为 API 结果删除它。

当然我尝试初始化结果 $scope.apiValue = 'pending...';但我只是想知道是否有更好的方法，因为我还不太熟悉“Angular 方式”。

尽管我的整个逻辑可能是错误的，但请检查下面的代码片段。

apiUrl = 'https://api.stackexchange.com/2.2/info?site=stackoverflow';

angular.module('app', []).directive('myDirective', [
  function() {
    return {
      restrict: 'E',
      replace: true,
      template: '<div>you asked for <strong>{{ infoKey }}</strong>, you get: <strong>{{ apiValue }}</strong></div>',
      controller: ['$scope', '$http',
        function($scope, $http) {
          $scope.askApi = function(key) {
            $http.get(apiUrl).success(function(data) {
              $scope.apiValue = data.items[0][key];
            });
          };
        }
      ],
      link: function(scope, element, attrs, ctrl) {
        scope.infoKey = attrs.infoKey;
        scope.askApi(scope.infoKey);
      }
    }
  }
]);
<html ng-app="app">

<head></head>

<body>
  <my-directive info-key="total_users"></my-directive>

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

</html>

最佳答案

您大体上是在正确的轨道上。但是，正如您所注意到的，您没有遵循最佳 Angular 实践。我要更改的一些内容(如下所示):

  1. 避免使用 $scope，而是使用 controllerAs 语法。避免 $scope 可以消除由于 $scope 具有的原型(prototype)继承和共享而可能发生的大量错误和混淆。

  2. 不要使用替换，而是使用该元素作为您的包含元素。它在功能上是等效的，并使您的标记更具语义。这里唯一要记住的是自定义元素将有一个 display: inline;默认样式而不是显示: block ；如果它是一个 div，它就会有。

  3. 使用 bindToController。公平地说，这是带有 Angular 1.3 的，而您的示例使用 Angular 1.2。可以说它删除了一些代码。

  4. 将您的 API 访问逻辑分离到一个服务中。

还有一些我要补充但没有显示的内容:

  1. 测试! Angular 旨在简化单元测试。通过编写测试，您对代码的理解将大大提高，更不用说您从编写测试中获得的其他好处了。

  2. 处理错误。在 Controller 中 promise 的 .success() 之后，您应该有一个 .catch() block 并处理错误。即使只是向用户显示错误也会有好处，甚至包括重试按钮。

angular.module('app', []).directive('myDirective', [
  function() {
    return {
      restrict: 'E',
      template: 'you asked for <strong>{{ vm.infoKey }}</strong>, you get: <strong>{{ vm.apiValue }}</strong>',
      controllerAs: 'vm',
      scope: {
        infoKey: '@'
      },
      bindToController: true,
      controller: ['stackoverflowInfo',
        function(stackoverflowInfo) {
          var vm = this;

          vm.apiValue = 'pending ...';

          stackoverflowInfo.get(vm.infoKey).then(function(value) {
            vm.apiValue = value;
          });
        }
      ]
    }
  }
]).service('stackoverflowInfo', ['$http', '$q', function ($http, $q) {
  var svc = this;
  var apiUrl = 'https://api.stackexchange.com/2.2/info?site=stackoverflow';

  svc.get = get;
  
  function get (key) {
    return getFromApi().then(function(data) {
      return data.items[0][key];
    });
  }

  function getFromApi () {
    var defer = $q.defer();
    $http.get(apiUrl).success(defer.resolve).error(defer.reject);
    return defer.promise;
  }
}]);
<html ng-app="app">

<head></head>

<body>
  <my-directive info-key="total_users"></my-directive>

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

</html>

关于javascript - Angular Directive(指令) $http. http响应前后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29843844/

25 4 0
文章推荐： ios - 如何显示 View 覆盖另一个 View 并更改 View 大小
文章推荐： ios - StreamingKit 重复歌曲 ios
文章推荐： c# - 从 picturebox C# 打印高质量的 Tiff 文档
文章推荐： swift - 从 AVAudioPlayer 设置 MPNowPlayingInfoCenter currentTime 和 SongLength
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com