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

I have a custom directive which holds a <textarea> element along with other HTML elements in its template using templateUrl. This directive should allow a user to type with any Indian Language (using any writing script like devanagri and others). The user will get to select the input language.

我有一个自定义指令，它使用templateUrl在模板中保存元素和其他HTML元素。该指令应该允许用户键入任何印度语言(使用devanagri等编写脚本)。用户将选择输入语言。</p>

This directive will be used like this in my HTML:<keybuddy></keybuddy>

这个指令将在我的HTML: 中使用

Now my problem is, in my main code, how should I retrieve the text entered in the textarea that is located in the template.html specified by templateUrl? I have the text available in the scope of my link function since I used ng-model on the textarea.

现在我的问题是，在我的主代码中，我应该如何检索输入在模板中的textarea中的文本。指定的html templateUrl吗?由于我在textarea上使用了ng-model，所以在链接函数的作用域中可以使用文本。

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

In my index.html, I should be able to do something like this:

在我的索引。html，我应该可以这样做:

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

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

How do I do it? Is there any other better way using the power of AngularJS? I went through these posts but wasn't helpful. Or might be I could not understand how to use it in my work. How to set a native attribute from AngularJS directive?, How to get evaluated attributes inside a custom directive

我该怎么做呢?有没有更好的方法来使用盎格鲁人的力量?我浏览了这些帖子，但没有什么帮助。也可能是我不知道如何在我的工作中使用它。如何从AngularJS指令设置本机属性?，如何在自定义指令中获取评估属性

my complete code on github: keybuddy

我在github上的完整代码:keybuddy

Note:

注意:

I should be able to use this directive anywhere in the application, any number of times.
我应该可以在应用程序的任何地方使用这个指令，任何次数。
It should be portable; I should be able to use it in any of my project or any other developer should be able to use it without much
它应该是便携式;我应该能够在我的任何项目中使用它，或者任何其他开发人员都应该能够使用它而不需要太多

3 个解决方案

#1

Go Angular :-)

角:-)

You don't need the use of jQuery here. Angular is sufficient enough. You can change your code like this:

这里不需要使用jQuery。角是足够足够了。您可以这样更改代码:

In your View:

在你的观点:

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

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

In your View controller:

在你的视图控制器:

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

And update your directive to have scope like below (replace your `scope: true):

并更新您的指示，使其具有如下的范围(替换您的范围:true):

scope: {
    inputText: '=model'
}

Read more on Isolating scope of a directive

阅读更多关于隔离指令范围的内容

#2

You can setup a bi-directional binding to the directive scope. This will allow your directive to change a value in the parent scope, which you can then read from your controller.

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

In your directives configuration setup the scope property with the name of an attribute to use for the binding, such as:

在您的指令配置中，设置范围属性，并使用属性的名称作为绑定，例如:

scope: { 
    model: '='
}

In your directive's template then you can set the textarea's ng-model to that binding name.

在您的指令模板中，您可以将textarea的ng模型设置为那个绑定名称。

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

In the parent where you use the directive, pass the attribute you configured set to the name of a variable on the scope.

在使用该指令的父类中，将您配置的属性设置为作用域上变量的名称。

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

Then in your controller you can access the textarea's current content by reading $scope.inputText.

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

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

Template:

模板:

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

#3

Since it's already in the scope, you could simply use

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

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

AngularJS version:

AngularJS版本:

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

EDIT: Adapted to match the actual source code.

编辑:适合匹配实际的源代码。

#1