Question

您好我正在使用angular指令，我创建了一个......

  app.directive('customtable', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs) {
            var html = '<table>';
            angular.forEach(scope[attrs.rows], function (row, index) {
                //html += '<tr><td>' + row.A+ '</td></tr>';
                html += '<tr><td>' + row.B+ '</td>' +
                '<td>' + row.C+ '</td>' +
                '<td>' + row.D+ '</td>' +
                '<td>' + row.E+ '</td>' +
                '<td>' + row.F+ '</td>' +
                '<td>' + row.G+ '</td>' +
                '<td>' + row.H+ '</td></tr>';
                if (index == 4) {
                    html += '<tr><td>' + 'Click Here to See All' + '</td></tr>';
                }
            })
            html += '</table>';
            element.replaceWith(html)
        }
    }
});

我从以下地方调用此指令：

<table>
<tr customtable ng-model="data" rows="data" ng-hide="hideRows && $index > 4 && $index < (myArray.length - 5)">

</tr>
</table>

工厂方法：

dataFactory.getdate().success($scope.handleSuccess).then(function (result)   {
    $scope.data= result.data;
});

这里的问题是我的范围变量$ scope.data是从工厂方法设置的。首先我的指令代码被执行，然后调用工厂服务。所以我在指令代码中获取未定义的数据变量。我们非常欢迎任何帮助和建议。我有点卡住了。

Answer 1

在指令调用数据中创建一个独立的范围，并监视该范围变量。

示例：Plunker以相同的方式传递指令中所需的任何其他信息。

.directive('customtable', function () {
    return {
        restrict: 'A',
        scope: {
          data: '='
        },
        link: function (scope, element, attrs) {
            var html = '<table>';
            scope.$watch('data', function(newValue, oldValue) {
              if (newValue === oldValue) return;
              angular.forEach(newValue, function (row, index) {
                  //html += '<tr><td>' + row.A+ '</td></tr>';
                  html += '<tr><td>' + row.B+ '</td>' +
                  '<td>' + row.C+ '</td>' +
                  '<td>' + row.D+ '</td>' +
                  '<td>' + row.E+ '</td>' +
                  '<td>' + row.F+ '</td>' +
                  '<td>' + row.G+ '</td>' +
                  '<td>' + row.H+ '</td></tr>';
                  if (index == 4) {
                      html += '<tr><td>' + 'Click Here to See All' + '</td></tr>';
                  }
              })

              html += '</table>';
              element.replaceWith(html)
            });


        }
    }
});

Angularjs在从控制器调用服务之前执行的目录数据

1 个答案: