javascript - 按需运行 AngularJS 指令

Question

我试图在某些事件后运行指令，例如，一些点击或模型更改。这是我的指令的外观:

  .directive('enclose', function ($window, $http) {
      return function (scope, elm, attrs) {
          if (scope.$last) {
              var url = getCurrentPath($window);
              var rowid = scope.row.entity.id;
              $http.get(url + '/' + rowid + '/attachment').success(function (data) {
                  (data.length > 30) ? $(elm).removeAttr('disabled') : $(elm).attr('disabled', 'disabled');
              })
          }
  };

长话短说:指令检查一行是否附加了文件；如果是这样，它会启用下载按钮。

在显示数据的表中，有很多行，并且有分页控件。因此，当我单击下一页(f.e)时，会出现问题，表中显示的所有数据都会更新，但指令不会更新。我的意思是，指令不会再次运行，更新每个按钮的启用/禁用属性。

我有两种方法:一，在我的 Controller 中，我有一个作用域变量，currentPage，在它更新后，我以某种方式调用该指令。顺便说一句，我正在使用Angular UI-grid来渲染数据。

  $scope.regulationGrid = {
          // ...
          onRegisterApi: function (gridApi) {
              $scope.gridApi = gridApi;
              $scope.currentPage = $scope.gridApi.pagination.getPage();
              $scope.gridApi.pagination.on.paginationChanged($scope, function () {
                  $scope.currentPage = $scope.gridApi.pagination.getPage();
                  // Here should be the directive call
              });
          }
      };

二，在指令中使用$watch函数，该函数将监听$scope.currentPage变量中的任何更改。但我没有实现让它工作，指令仅在加载时运行。

有什么方法可以按需运行指令吗？因为我的指令在加载时起作用，但在范围更改时不起作用。

提前谢谢您!

编辑

这就是问题的样子。左表右:第 3、4 和 8 行包含文件，因此可以启用下载按钮。但右表显示此按钮错误，因为指令不再运行。它的正确值为第 12、14 行启用。

所以重点是，单击 nextPage 按钮后如何检查这些值？

Answer 1

正如我在评论中提到的，指令:

• 不是函数
• 无法调用
• 是网站的静态部分，除非您使用 ng-if 或 ng-switch
• 不应执行任何业务逻辑

看来您的问题是 XY 问题，所以让我们重新开始。你想做什么？

从表面上看，您希望根据 HTTP 调用的结果将指令设置为禁用或启用。不是在指令内执行 HTTP 调用，而是从隔离范围向指令传递一个变量并从父 Controller 更改该变量怎么样？这可以减少您的代码耦合，并让您坚持最佳的 Angular 实践。

// usage: <enclose disabled="someScopeVariable"></enclose>
.directive('enclose', function() {
  return {
    scope: {
      value: '=',
      // One time binding is only supported natively in 1.3+.
      maxLength: '::'
    },
    link: function ($scope, $elem, $attrs) {
      var maxLength = parseInt($scope.maxLength);
      // What purpose does $scope.$last serve here?
      if(!$scope.$last) return;
      $scope.$watch('value', function(newValue, oldValue) {
        if(newValue === oldValue) {
          return;
        }

        if(oldValue.length > maxLength) {
          $elem.removeAttribute('disabled');
        } else {
          $elem.setAttribute('disabled', 'disabled');
        }
      });
    }
  }
})
.controller('YourController', function($scope, attachmentService) {
  $scope.regulationGrid = {
    onRegisterApi: function(gridApi) {
      .....
      $scope.gridApi.pagination.on.paginationChanged($scope, function() {
        $scope.currentPage = $scope.gridApi.pagination.getPage();
        // $http call is moved to external service.
        attachmentService.get($scope.row.entity.id)
          .then(function(data) {
            $scope.enclosedData = data;
          });
      });
    }
  };

})
.service('attachmentService', function() {
  this.get = function get(rowId) {
    // Why are you using getCurrentPath, by the way? That seems very hacky.
    // An alternative would be to use /api and then use a http interceptor to
    // rewrite /api to wherever the base path actually is. Either way,
    // the service shouldn't do this because of code duplication.
    return $http.get('/api/' + rowId + '/attachment').then(function(response) {
      return response.data;
    });
  };
});

那么你的 html 可能看起来像这样:

<div ng-controller='YourController'>
  <enclose value="enclosedData" max-length="30">
  </enclose>
</div>