通过代码

Question

建立一个可重用的AngularJS指令与双向数据绑定设置我试图构建一个可重用的指令，显示一个对话框，当一个按钮被点击并允许用户自定义一个字符串数组。我在单用途情况下可以正常工作，但我试图弄清楚是否可以通过代码创建双向数据绑定，以便我可以多次使用此指令的单个实例与不同的数组的字符串。

以我HTML，我有指令（注意缺乏结合到特定阵列）：

<my-array-dialog control='arrayDialog'></my-array-dialog>

我暴露的共享控制对象上有一个ShowDialog方法使所述对话框显示。这种模式的一个例子是：http://plnkr.co/edit/MqN9yS8R5dnqTfjqldwX?p=preview

我想要做的是双向数据绑定与父控制器传入数据到我的showDialog方法。我不确定如何配置它，或者即使它是可能的。

在我的指导，我有以下几点：

$scope.control = { 
    showDialog: function (arrayData) { 
     // Ideally, this would create two-way data binding 
     $scope.arrayData = arrayData; 
     // Manipulate the DOM here to show the dialog 
    } 
} 

理想的情况下，以$scope.arrayData变化将在调用代码的arrayData得到体现。同样，我没有把它设置为属性的原因是因为我想用不同的数据多次调用这个对话框并避免有多个对话框指令实例。

是否有可能以这种方式设置双向数据绑定，还是我在谈论这一切都是错误的？

Answer 1

绝对！查看$compile上令人生畏但却非常有用的AngularJS文档页面。特别是，你想要做的是在父指令的变量和局部范围内的变量之间创建一个双向绑定。

定义指令时，可以指定一个作用域对象。您需要创建一个隔离范围（用于可重用性），并使用@功能创建具有HTML属性的双向绑定。

从$编译文档：

=或= ATTR - 建立本地范围属性，并经由ATTR属性的值定义的名称的父范围属性之间的双向绑定。如果未指定attr名称，则假定属性名称与本地名称相同。给定范围的小部件定义：{localModel：'= myAttr'}，那么小部件范围属性localModel将反映父范围上的parentModel的值。对parentModel的任何更改都会反映在localModel中，localModel中的任何更改都会反映在parentModel中。