Question

无法使用通过promise更新的数据正确显示指令。第一个指令完美更新，但第二个和第三个指令不会更新。

首先，数据：

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.data = {};

  $timeout(function() {
      angular.copy({totalItems: 100, pageSize: 10, currentPage: 1 }, $scope.data);
  }, 3000);
});

然后是指令：

var template1 = '{{(data.pageSize * (data.currentPage - 1)) + 1}} - {{data.pageSize * data.currentPage}} of {{data.totalItems}}';
var template2 = '{{lower}} - {{upper}} of {{total}}';
var dir = {
  restrict: 'C',
  template: template1,
  scope: false
};

app.directive('pagination', function() {
    return dir;    
});

app.directive('pagination2', function() {
  dir.template = template2;
  dir.link = function(scope, element, attrs) {
    scope.lower = (attrs.size * (attrs.currentPage - 1)) + 1;
    scope.upper = (attrs.size * attrs.currentPage);
    scope.total = attrs.total;
  };

  return dir;
});

app.directive('pagination3', function() {
  dir.template = template2;
  dir.link = function(scope, element, attrs) {
    scope.lower = (scope.data.pageSize * (scope.data.currentPage - 1)) + 1;
    scope.upper = (scope.data.pageSize * scope.data.currentPage);
    scope.total = scope.data.totalItems;
  };

  return dir;
});

最后是加价：

<div class="pagination"></div>
<div class="pagination2" total="{{data.totalItems}}" size="{{data.pageSize}}" current-page="{{data.currentPage}}"></div>
<div class="pagination3"></div>

我明白为什么第一个有效。 $timeout完成，我的$scope更新，随后进行脏检查，一切都重新计算，一切都很顺利。

在第二个我认为我明白为什么它不更新 - 因为当我将值传递给元素属性时数据不存在，这意味着整个指令是使用{{1值。我想以某种方式纠正这一点，并在undefined更新时更新指令。

我想我用第三个指令解决了第二个指令遇到的问题，但我很困惑为什么这个指令不起作用。我以为我可以直接访问$scope.data因为我的指令正在使用$scope，但显然没有。

Answer 1

app.directive('pagination3', function() {
  dir.template = template2;
  dir.link = function(scope, element, attrs) {
    scope.lower = (scope.data.pageSize * (scope.data.currentPage - 1)) + 1;
    scope.upper = (scope.data.pageSize * scope.data.currentPage);
    scope.total = scope.data.totalItems;
};

return dir;
});

根据您的代码，您在指令的链接阶段分配scope.data.totalItems，但此时scope.data只是一个空对象{}，它没有名为totalItems的属性或pageSize或currentPage。分配后，低级，高级和总计将为undefined。

如果您真的不想将计算放在视图模板中，可以监控scope.data的更改，如下所示

app.directive('pagination3', function() {
  dir.template = template2;
  dir.link = function(scope, element, attrs) {
    scope.$watch('data', function(newVal, oldVal) {
      scope.lower = (newVal.pageSize * (newVal.currentPage - 1)) + 1;
      scope.upper = (newVal.pageSize * newVal.currentPage);
      scope.total = newVal.totalItems;
    }, true);
  };
  return dir;
};

指令需要在呈现元素后更新数据

1 个答案: