Question

我有一个自定义指令，它使用<textarea>在其模板中保存templateUrl元素以及其他HTML元素。该指令应允许用户使用任何印度语言（使用任何写作脚本，如devanagri和其他）进行输入。用户可以选择输入语言。

此指令将在我的HTML中使用：<keybuddy></keybuddy>

现在我的问题是，在我的主要代码中，如何检索位于textarea指定的template.html中的templateUrl中输入的文字？由于我在ng-model上使用textarea，因此我的链接功能范围内提供了该文本。

<textarea id="inputField"
          placeholder="start typing....."
          ng-model="inputText"
          rows="5">
</textarea>

在我的index.html中，我应该能够做到这样的事情：

<keybuddy></keybuddy>
<button onclick="printText()">Show Text</button>

<script>
    var printText = function () {
        console.log($("keybuddy").value);
    }
</script>

我该怎么办？还有其他更好的方法使用AngularJS的强大功能吗？我浏览了这些帖子，但没有帮助。或者可能是我无法理解如何在我的工作中使用它。 How to set a native attribute from AngularJS directive?，How to get evaluated attributes inside a custom directive

我在github上的完整代码：keybuddy

注意：

我应该可以在应用程序的任何地方使用此指令，无论多次。
它应该是便携的;我应该可以在我的任何项目中使用它，或者任何其他开发人员应该能够在没有太多的情况下使用它

Answer 1

您可以设置指令范围的双向绑定。这将允许您的指令更改父作用域中的值，然后您可以从控制器中读取该值。

在您的指令配置中，使用用于绑定的属性名称设置scope属性，例如：

scope: { 
    model: '='
}

在您的指令模板中，您可以将textarea的ng-model设置为该绑定名称。

<textarea ng-model="model"></textarea>

在使用该指令的父级中，将您配置的属性集传递给作用域上的变量名称。

<keybuddy model="inputText"></keybuddy>

然后在您的控制器中，您可以通过阅读$scope.inputText来访问textarea的当前内容。

$scope.printText = function(){
    alert($scope.inputText);
}

模板：

<button ng-click="printText();">Print text</button>

Answer 2

Go Angular： - ）

你不需要在这里使用jQuery。角度足够了。您可以像这样更改代码：

在您的视图中：

<keybuddy model="myInputText"></keybuddy>

<button ng-click="showText()">Show Text</button>

在View控制器中：

$scope.showText = function() {
    console.log($scope.myInputText);
}

并更新您的指令以使scope如下所示（替换您的`scope：true）：

scope: {
    inputText: '=model'
}

详细了解Isolating scope of a directive

Answer 3

由于它已经在范围内，您可以简单地使用

console.log($("keybuddy textarea").scope().inputText);

AngularJS版本：

console.log(angular.element("keybuddy textarea").scope().inputText);

编辑：改编以匹配实际的源代码。

AngularJS：如何将属性设置为自定义指令

3 个答案: