Question

我尝试使用角度组件替换指令来创建组件（数据表）。我想使用ng-repeat中的组件，如：

<div ng-repeat='item in items'>
<my-datatable></my-datatable>
</div>

my-datatable组件代码如下所示：

 angular.module('App').component('myDatatable', {
        bindings: {
            ctrl: '=?',
            datasource: '=?'
        },
        bindToController: true,
        controllerAs: 'dataTable',
        template: function(){},
        controller: function(){}
    });

第一个问题： 1.对于my-datatable组件的每个实例，模板函数都不是runnig。这意味着，如果在my-datatable中我有基于my-datatable的唯一Id生成的其他组件（可以仅在控制器中创建），则很难编写该代码。 2.嵌套隔离范围，创建o太长的$ parent链，用于引用某个范围变量，如下所示（如果我使用两个嵌套的my-datatable）：

 ng-click="$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.select($parent.$parent.$parent.$parent.dataItem,dataItem)"

所以，我的问题是：这是一种使用角度分量来避免这个问题的方法吗？

使用没有隔离范围的指令编写控件代码，我没有这个问题。这就是为什么我想将所有角度组件的代码更改为指令。

我开始将may组件转换为指令，我记得很少：

对于$ parent的长链。$ parent ...，我在组件控制器中创建一个变量$ parent，引用了组件的父范围，所以如果我需要在组件内部引用到外部范围，我可以使用：dataTable 。$父。
隔离范围的优点是，我可以销毁组件并重新创建，非常简单和干净（当我销毁隔离范围时，所有观察者都被删除），这是没有隔离范围的指令方式所不可能的。

这意味着，在模板函数中为每个组件实例生成唯一ID仍然只是问题。 换句话说：如何在每个组件实例上运行模板功能。

举例说明： https://jsfiddle.net/bogdanim36/t3gmzb6z/3/

并进行了一些测试，我发现在ng-repeat内部的指令也是如此：模板函数没有为每个组件实例运行。

Answer 1

最后我在控制器中生成html代码，以解决这个问题，这意味着一个更多的摘要周期。不是我想要的，但我认为这是我个案中最好的解决方案。

ng-repeat中的Angular 1.5组件，模板功能只运行一次

1 个答案: