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

Question

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

这个指令将在我的 HTML 中像这样使用：<keybuddy></keybuddy>

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

<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

转角 :-)

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

在你看来：

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

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

在您的视图控制器中：

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

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

scope: {
    inputText: '=model'
}

阅读更多Isolating scope of a directive

Answer 2

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

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

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 3

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

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

AngularJS 版本：

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

编辑：适应实际源代码。