AngularJS指令未更新

Question

我有一个指令，当Angular实例化页面时，它似乎可以正确地设置所有内容，但当我与它的组件交互时，它不会更新。

HTML：

<div class="app-table col-md-6 col-sm-12 col-xs-12" app-table>
    <header>
        <span class="col-xs-12">Subscriptions</span>
    </header>
    <div class="pagination">
        <span class="user-controls">
            <span class="page-down glyphicon glyphicon-chevron-left"></span>
            <input type="text" ng-model="page"/>
            <span>/ {{summary.subscriptions.pages}}</span>
            <span class="page-up glyphicon glyphicon-chevron-right"></span>
        </span>
        <span class="results-text">Results 1 - {{summary.subscriptions.labels.length}} of {{summary.subscriptions.total}}</span>
    </div>
    <table class="col-xs-12 table-striped">
        <thead>
            <td class="col-xs-9">Name</td>
            <td class="col-xs-3">Subscribers</td>
        </thead>
        <tbody>
            <tr ng-repeat="label in summary.subscriptions.labels | limitTo: 5 : offset">
                <td class="col-xs-9">{{label.name}}</td>
                <td class="col-xs-3">{{label.subscribers}}</td>
            </tr>
        </tbody>
    </table>
</div>

控制器：

app.controller('DashboardCtrl', ['$scope', 'DashboardService', function($scope, DashboardService) {
    $scope.summary = {};

    $scope.init = function() {
        DashboardService.getSummary().then(function(response){
            $scope.summary = response;
        });
    };

    $scope.init();
}]);

指令：

app.directive('appTable', [function () {
return {
    restrict: 'A', 
    scope: true,
    link: function (scope, elem) {
        scope.offset = 0;
        scope.page = 1;

        elem.find('.page-up').bind('click', function(){
            scope.offset += 5;
            scope.page += 1;
        });


        elem.find('.page-down').bind('click', function(){
            scope.offset -= 5;
            scope.page -= 1;
        });
    }
};
}]);

当页面正确加载时，它会显示偏移量为0的页面1。如果我将变量更改为page=2和offset=5，则页面将按预期加载，值将正确填充，偏移量将正确显示索引6-10的订阅。但是，当我单击click元素绑定到的按钮时，我没有看到页面或偏移变量更新，即使我可以通过Chrome Dev工具验证点击绑定正在命中。似乎指令没有正确地将作用域变量传递给父控制器？

Answer 1

我认为你有两个不同的问题。

第一个问题是您在Angular之外调用了一个click处理程序，因此它不知道它需要运行自己的摘要循环。可以通过在page-up和page-down元素上附加ng-click或调用$apply来解决此问题

elem.find('.page-up').bind('click', function(){
    scope.$apply(function () {
        scope.offset += 5;
        scope.page += 1;
    });
});

第二个问题是您的指令具有scope: true，这意味着它通过原型继承继承父(控制器)作用域。因此，当您的指令开始在作用域上设置page和offset时，它会在自己的作用域上创建新的变量，任何外部作用域(如控制器)都看不到这些变量：

link: function (scope, elem) {
    // Creating new variables on the child scope

    scope.offset = 0;
    scope.page = 1;

    elem.find('.page-up').bind('click', function(){
        // Updating variables on the child scope

        scope.offset += 5;
        scope.page += 1;
    });
}

因此，如果您在app-table元素中添加{{ page }}和{{ offset }}标记，您将看到它更新。但是，如果您将该标记添加到app-table元素之外(但仍然在ng-controller元素内)，您将看到控制器没有新的信息。

如果您设置了scope: false，那么它应该可以工作，因为这样您将写入与控制器完全相同的作用域。

如果您使用控制器中的对象，它可以与scope: true一起使用：

scope.pagination = {
    offset: 0;
    page: 1
};

此外，我不确定这里提供的示例是否经过简化，但您基本上是使用Angular指令来执行jQuery。你有没有考虑过用scope: "=" (隔离作用域)做一个独立的pagination组件？然后，您可以显式地传递它所需的数据(page、offset、total、.etc)，并且该指令可以有自己的模板。

Answer 2

这仍然是在angularjs中使用jquery的问题。

实际上offset和page已经在你的作用域中改变了，但是如果你想在你的视图上反映它们，你必须调用scope.$apply()让angular重新渲染你的页面。

​

var app = angular.module("app", []);
app.controller('DashboardCtrl', ['$scope', function($scope) {
  $scope.summary = {
    subscriptions: {
      labels: [
        {
          name: 'name1',
          subscribers: 'A,B'
        },{
          name: 'name2',
          subscribers: 'A,B,C'
        },{
          name: 'name3',
          subscribers: 'A,B,C,D'
        }
      ],
      total: 10,
      pages: 1
    }
  };
  
  //$scope.offset = 0;
  //$scope.page = 1;
}]);

app.directive('appTable', [function() {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, elem) {
      scope.offset = 0;
      scope.page = 1;
      elem.find('.page-up').on('click', function() {
        scope.$apply(function() {
          scope.offset += 5;
          scope.page += 1;
        });
      });


      elem.find('.page-down').on('click', function() {
        scope.$apply(function() {
          scope.offset -= 5;
          scope.page -= 1;
        });
      });
    }
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="DashboardCtrl">
  <div class="app-table col-md-6 col-sm-12 col-xs-12" app-table>
    <header>
      <span class="col-xs-12">Subscriptions</span>
    </header>
    <div class="pagination">
      <span class="user-controls">
            <span class="page-down glyphicon glyphicon-chevron-left">PageDown</span><br>
      <input type="text" ng-model="page" />
      <span>/ {{summary.subscriptions.pages}}</span><br>
      <span class="page-up glyphicon glyphicon-chevron-right">PageUp</span><br>
      </span>
      <span class="results-text">Results 1 - {{summary.subscriptions.labels.length}} of {{summary.subscriptions.total}}</span>
    </div>
    <table class="col-xs-12 table-striped">
      <thead>
        <td class="col-xs-9">Name</td>
        <td class="col-xs-3">Subscribers</td>
      </thead>
      <tbody>
        <tr ng-repeat="label in summary.subscriptions.labels | limitTo: 5 : offset">
          <td class="col-xs-9">{{label.name}}</td>
          <td class="col-xs-3">{{label.subscribers}}</td>
        </tr>
      </tbody>
    </table>
    {{offset}}
    {{page}}
  </div>

​