javascript - 如何在使用编译而不是链接的指令中使用 Angular 中的矩库

Question

我的数据库中有一个来自名为 Actions 的单个模型的连接文档树(父级到子级)，它们在 Angular Directive(指令)中递归编译，以便它们嵌套在父级中。

我有以下代码:

angular.module('crmDashboardApp')
  .directive('actionDirective', function ($http, $compile, RecursionHelper) {
    return {
      scope: {
        actionId: '=', // html:action-node, js:actionNode
        actionList: '='
      },
      templateUrl: 'app/main/directive/action/action.directive.html',
      replace: true,
      restrict: 'E',
      compile: function (element) {
        return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn){
          scope.deleteAction = function (_action) {
            var id = _action._id;
            $http.delete('/api/actions', {
                data: {'id':id},
                headers: {"Content-Type": "application/json;charset=utf-8"} // we need to do this if we want to send params, otherwise we need to do traditional REST in URL
              });
          };
          // Find for already called action list
          scope.findAction = function (_id, _list) {
            scope.actionNode = _.findWhere(_list, {_id:_id})
          };
          scope.findAction(scope.actionId, scope.actionList);

          function calculateTimeSince(){
            scope.fromNow = moment(scope.actionNode.content).fromNow(true);
          }
          setInterval(calculateTimeSince, 1000);
          scope.fromNow = moment(scope.actionNode.content).fromNow(true);
        });
      }
    };
  });

这只会在加载时编译一次，并且之后不会更改范围内的任何内容。我希望 setInterval 函数更改变量范围。fromNow 每秒更新一次并更新 View (HTML 使用简单的 {{fromNow}} 引用它)

我相信我必须以某种方式重新编译该指令，但要做的事情如下:

$compile(element.contents())(scope)

在setInterval函数中不起作用。

我的指令的 HTML 如下所示:

<div class="action-node">
  <header>{{ actionNode.name }}</header>
  <div class="row">
    <h3 class="col-md-12">{{ actionNode.title }}</h2>
    <h5 class="col-md-12">{{ actionNode.description }}</h5>
  </div>
  <div class="row">
    <div class="col-md-3">Time Since: {{fromNow}}</div>
    <div class="col-md-3">Content: {{ actionNode.content}}</div>
    <div class="col-md-3">Duration Type:{{ actionNode.duration_type }}</div>
    <div class="col-md-3">Type: {{ actionNode.type }}</div>
  </div>
  <div class="row">
    <div class="col-md-4">
      {{actionNode.children.length > 0 ? actionNode.children : "No children" }}
    </div>
    <form class="pull-right" ng-submit="deleteAction(actionNode)">
      <input class="btn btn-primary" type="submit" value="Delete">
    </form>
  </div>

  <div class="action-wrapper" ng-repeat="child in actionNode.children" ng-if="actionNode.children.length > 0">
    <!-- <div class="row" ng-repeat="child in actionNode.children"  ng-if="actionNode.children.length > 0" ng-style="{'margin-left': ({{actionNode.nest_level}}+1)*30+'px'}"> -->
    <action-directive action-ID="child" action-list="actionList" />
  </div>
</div>

您可以看到它在底部再次调用自己。我还使用 RecursionHelper，因此无限循环不是问题。

Answer 1

您需要使用 Angular 包装器服务 $interval，而不是使用 setInterval。

$interval 服务通过内部调用执行摘要循环的 $scope.$apply 来同步 View 和模型。