通过通过代码设置的双向数据指示构建可重复使用的AngularJS指令

Question

我正在尝试构建可重复使用的指令，该指令在单击按钮时显示对话框，并允许用户自定义字符串数组。我在一次性案例场景中工作正常，但是我试图弄清楚是否可以通过代码创建双向数据绑定，以便我可以多次使用该指令的单个实例，并使用不同的数组使用该指令字符串。

在我的html中，我有指令（请注意缺乏与特定数组的绑定）：

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

我正在使用上面的Showdialog方法公开共享控制对象，该对象会显示对话框。该模式的一个示例是：http：//plnkr.co/edit/mqn9ys8r5dnqtfjqldwx?p=Preview

我想做的是将数据结合在我的showdialog方法中，并将数据传递到我的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属性创建双向绑定。

来自$编译文档：

= or = attr-设置本地范围属性与通过attr属性值定义的名称的父范围属性之间的双向绑定。如果未指定atter名称，则假定属性名称与本地名称相同。给定和小部件的定义范围：{localModel：'= myattr'}，然后窗口小部件范围属性localModel将反映parentmodel在父范围上的值。对源模模型的任何更改都将反映在LocalModel中，LocalModel的任何更改都将反映在parendmodel中。