Javascript angularjs对指令和模型的混淆

我这样做对吗？我的作用域由控制器分配了一些json。我用angularForEach迭代它

我希望能够将我的td数据格式化为日期。这是一个微不足道的例子。理想情况下，我希望对行值使用日期过滤器，但语法似乎不正确。[EDIT]我想我需要使用“插值”[/EDIT]

大多数示例都是在花括号中工作的，并且似乎在实际视图中。有人能给我个建议吗？我害怕我要走自己的路了

.directive('betterTable', function () {
    return {
        restrict: 'E',        
        link: function ($scope, element, attrs) {

            var html = '<table border="1" width="100%">';
            html += '<tr>';
            angular.forEach($scope.result, function (row, index) {
                html += '<td>'; 
                html += row;
                html += '</td>';
            });
            html += '</tr></table>';

        }
   } 
 });

指令（'betterTable'，函数（）{ 返回{ 限制：'E'， 链接：函数（$scope，element，attrs）{ var html=''； html+=''； angular.forEach（$scope.result，函数（行，索引）{ html+=''； html+=行； html+=''； }); html+=''； } } });

---

您可以这样做：

.directive('betterTable', function () {
  return {
    restrict: 'E',
    template: '<table border="1" width="100%">' +
      '<tr>' +
        '<td ng-repeat="row in result">{{row|date:"short"}}</td>' +
      '</tr>' +
    '</table>',
    link: function ($scope, element, attrs) {
      // Nothing to see here...
    }
  } 
});

指令（'betterTable'，函数（）{ 返回{ 限制：'E'， 模板：“”+ '' + “{row | date:“short”}”+ '' + '', 链接：函数（$scope，element，attrs）{ //这里没什么可看的。。。 } } }); 老实说，你真的不需要这方面的指导

如果您真的想在link函数中执行循环（我不建议这样做），这应该可以让您开始：

.directive('betterTable', ['$compile', function ($compile) {
  return {
    restrict: 'E',        
    link: function ($scope, element, attrs) {

        var html = '<table border="1" width="100%">';
        html += '<tr>';
        angular.forEach($scope.result, function (row, index) {
          html += '<td>';
          html += $compile("{{row|date:'short'}}")($scope);
          html += '</td>';
          // This could also be expressed on one line as:
          // html += $compile("<td>{{row|date:'short'}}</td>")($scope);
        });
        html += '</tr></table>';

    }
  } 
}]);

.directive（'betterTable'，['$compile'，function（$compile）{
返回{
限制：'E'，
链接：函数（$scope，element，attrs）{
var html=''；
html+=''；
angular.forEach（$scope.result，函数（行，索引）{
html+=''；
html+=$compile（$scope）；
html+=''；
//这也可以用一行表示为：
//html+=$compile（$scope）；
});
html+=''；
}
} 
}]);

编辑：我想澄清一下，根据您发布的内容，我看不出有任何理由创建指令。你可以把它放在你的视野中：

<table border="1" width="100%">
  <tr>
    <td ng-repeat="row in result">{{row|date:"short"}}</td>
  </tr>
</table>

{{行|日期：“短”}

您可以这样做：

.directive('betterTable', function () {
  return {
    restrict: 'E',
    template: '<table border="1" width="100%">' +
      '<tr>' +
        '<td ng-repeat="row in result">{{row|date:"short"}}</td>' +
      '</tr>' +
    '</table>',
    link: function ($scope, element, attrs) {
      // Nothing to see here...
    }
  } 
});

指令（'betterTable'，函数（）{ 返回{ 限制：'E'， 模板：“”+ '' + “{row | date:“short”}”+ '' + '', 链接：函数（$scope，element，attrs）{ //这里没什么可看的。。。 } } }); 老实说，你真的不需要这方面的指导

如果您真的想在link函数中执行循环（我不建议这样做），这应该可以让您开始：

.directive('betterTable', ['$compile', function ($compile) {
  return {
    restrict: 'E',        
    link: function ($scope, element, attrs) {

        var html = '<table border="1" width="100%">';
        html += '<tr>';
        angular.forEach($scope.result, function (row, index) {
          html += '<td>';
          html += $compile("{{row|date:'short'}}")($scope);
          html += '</td>';
          // This could also be expressed on one line as:
          // html += $compile("<td>{{row|date:'short'}}</td>")($scope);
        });
        html += '</tr></table>';

    }
  } 
}]);

.directive（'betterTable'，['$compile'，function（$compile）{
返回{
限制：'E'，
链接：函数（$scope，element，attrs）{
var html=''；
html+=''；
angular.forEach（$scope.result，函数（行，索引）{
html+=''；
html+=$compile（$scope）；
html+=''；
//这也可以用一行表示为：
//html+=$compile（$scope）；
});
html+=''；
}
} 
}]);

编辑：我想澄清一下，根据您发布的内容，我看不出有任何理由创建指令。你可以把它放在你的视野中：

<table border="1" width="100%">
  <tr>
    <td ng-repeat="row in result">{{row|date:"short"}}</td>
  </tr>
</table>

{{行|日期：“短”}

如果仍要创建指令，设置部分HTML文件怎么样

指示

.directive('betterTable', ['$compile', function () {
  return {
    restrict: 'E',
    templateURL: '/root/to/partials/better_table.html',
    link: function ($scope, element, attrs) {
        // As you're not restricting the scope, $scope.result will exist here.
    }
  } 
}]);

better_table.html（与@rtcherry建议的完全相同）

{{行|日期：“短”}

这样，您将获得更好的结构化代码和适当更新的作用域：）

---

希望它能帮助您

如果您仍然想创建一个指令，那么设置一个部分HTML文件怎么样

指示

.directive('betterTable', ['$compile', function () {
  return {
    restrict: 'E',
    templateURL: '/root/to/partials/better_table.html',
    link: function ($scope, element, attrs) {
        // As you're not restricting the scope, $scope.result will exist here.
    }
  } 
}]);

better_table.html（与@rtcherry建议的完全相同）

{{行|日期：“短”}

这样，您将获得更好的结构化代码和适当更新的作用域：）

---

希望它有帮助

与其编写自定义指令，不如编写自定义筛选器？另外，发布“语法不正确”的错误是什么？为什么要避免使用插值（如您所提到的大括号）。设置指令时，link函数仅运行一次。您希望使用具有范围变量数据绑定的模板。2.您确实应该避免在指令代码中构建DOM元素。把它推到模板上-你的指令可以做一些事情，比如准备/过滤行数据，但不能构建表/tr/td等@IshanChatterjee我不想避免插值。事实上我更喜欢它@MikeRobinson所以我的指令没有问题。然而，如果我看一下我遇到的其他例子，我们似乎没有使用方括号。我想我有点不确定如何将我所拥有的内容转换成更合适的格式。此外，使用这种方法，我无法使数据绑定工作。与其编写自定义指令，为什么不编写自定义筛选器？另外，发布“语法不正确”的错误是什么？为什么要避免使用插值（如您所提到的大括号）。设置指令时，link函数仅运行一次。您希望使用具有范围变量数据绑定的模板。2.您确实应该避免在指令代码中构建DOM元素。把它推到模板上-你的指令可以做一些事情，比如准备/过滤行数据，但不能构建表/tr/td等@IshanChatterjee我不想避免插值。事实上我更喜欢它@MikeRobinson所以我的指令没有问题。然而，如果我看一下我遇到的其他例子，我们似乎没有使用方括号。我想我有点不确定如何将我所拥有的内容转换成更合适的格式。此外，使用这种方法，我无法将数据绑定到