Question

我想创建一个粗略代表表的指令。另外，我想创建一个定义该表中列的指令。表指令ng-repeats在tr上并显示每行的自定义列。

我对角度很新。任何帮助将不胜感激，这里是代码和jsfiddle链接。

正如你从小提琴中看到的那样，这还不起作用。

HTML：

<div ng-app='myApp' ng-controller='myController'>
    Table of People:
    <my-table>
        <my-td my-data-name='Name'></my-td>
        <my-td my-data-name='Description'></my-td>
    </my-table>
    <button>done</button>
</div>

使用Javascript：

angular.module('myApp', [])
.controller('myController',function($scope){
    $scope.items = [{Name: 'John', Description: 'Awesome'},
                    {Name: 'Pat', Description: 'Ambiguous'}];
})
.directive('myTable', function(){
    return {
        link: function(scope,element,attrs){
        },
        transclude:true,
        template: '<table><tr ng-repeat="item in items" ng-transclude>'
                    +'<td>static column at the end</td></tr></table>'
    };
}).directive('myTd', function(){
    return {
        link: function (scope,element,attrs){
            scope.data = attrs.myDataName;
        },
        template: '<td><input ngModel="eval(\'item.\' + data)" /></td>'
    }});

Answer 1

您需要更改的一些事项：

restrict指令定义对象的属性。默认情况下，指令仅限于html属性 - 如果要使用元素（如果有），则需要将restrict设置为包含E。 Link to docs
您有ngModel="eval(\'item.\' + data)"。第一个问题是在html中，angular使用带连字符的形式，而不是camelCase，因此将ngModel更改为ng-model。其次，ng-model属性会根据范围自动评估，因此您不需要使用eval。更好的方法是使用javascript的括号表示法来访问该属性。因此，您的ng-model绑定变为：
最后，如果您正在重复使用指令，那么您几乎总是希望创建一个新的作用域，如果不是隔离作用域，否则作用域可能会相互干扰。在您的情况下，第二列中的数据将覆盖第一列。要解决此问题，请使用scope: true

您可以在the updated fiddle中看到所有更改。我建议您评论一下scope行，并确保您了解如果您没有单独的范围会发生什么，因为它有点微妙。

修改

关于静态列，如果将静态列包含为静态html，我认为它更有意义（并且它更简单）。因此，不要将其放在my-table模板中，而是将其添加为：

<my-table> <my-td my-data-name='Name'></my-td> <my-td my-data-name='Description'></my-td> <td>static column</td> </my-table>

我认为这更简单，并且还保留了html语义，并代表了它将被编译成什么。 This shows it working

AngularJS和嵌套指令

1 个答案: