Question

我是Angular的初学者，我无法弄清楚如何从指令外部检索数据。我有各种输入正在更新，我需要指令来获取这些数据并使用它。例如，在下面的代码中，第一个输入字段连接到指令并且工作正常，但是没有将指令属性放在第二个输入字段上，如何在指令中更新该字段中输入的数据？

HTML：

<div ng-app="myDirective">
    <input type="text" ng-model="test1" my-directive>
    <input type="text" ng-model="test2">
</div>

指令：

angular.module('myDirective', [])
    .directive('myDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.ngModel, function (v) {
                console.log('New Value from field 1: ' + v);
                //console.log('New Value from field 2: ' + ???);
            });
        }
    };
});

Answer 1

我本可以在文字中解释这一点，但我认为如果您按john lindquist观看这3个视频会好得多：

summary。

它们非常短（每个约4分钟），但非常简单实用。

PS：顺便说一句，我建议你也要看别人。它们都很简洁精确，非常喜欢它们。

Answer 2

由于您的指令不创建新范围，因此指令的link方法中的scope变量指向包含两个输入的外部范围。所以你可以替换：

//console.log('New Value from field 2: ' + ???);

与

console.log('New Value from field 2: ' + scope.test2);

确保在测试时在第二个输入中输入一些数据，否则它将打印undefined。

Here is a working fiddle

编辑：如果您确实需要在指令中使用隔离范围，则可以在HTML中执行以下操作：

<input type="text" ng-model="test1" my-directive="test2">
<input type="text" ng-model="test2">

现在的区别在于将test2模型传递到指令中，并通过添加scope属性在指令中设置对它的绑定：

scope: {
    otherInput: '=myDirective'
    // this tells the directive to bind the local variable `otherInput`
    // to whatever the `my-directive` attribute value is. In this case, `test2`
},

这允许您访问指令中的传递值。然后，您将更改$watch es，如下所示：

scope.$watch(attrs.ngModel, function (v) {
    console.log('New Value from field 1: ' + v);
    console.log('New Value from field 2: ' + scope.otherInput);
});

// notice the syntax for watching a scope variable
scope.$watch('otherInput', function (v) {
    console.log('New Value from field 1: ' + scope.test1);
    console.log('New Value from field 2: ' + v);
});

我将此作为另一个例子，test3和test4包含在我的小提琴中。

Answer 3

AngularJs指令允许您以不同的方式使用范围并执行您需要的许多很酷的事情。您可以使用范围而不是继承，继承和隔离。如果您使用范围作为隔离，您可以传递变量并将其绑定到任何你想要的地方。

这里有两篇很酷的文章，附有例子，可以帮助你

http://www.w3docs.com/snippets/angularjs/change-variable-from-outside-of-directive.html

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html

AngularJS - 输入更改传递给指令的指令值

3 个答案: