5

我是 AngularJs 的初学者，我不知道如何从指令外部检索数据。我有各种输入正在更新，我需要指令来获取这些数据并使用它。

例如，在下面的代码中，第一个输入字段连接到指令并且工作正常，但是没有将指令属性放在第二个输入字段上，如何在指令中更新该字段中键入的数据？

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: ' + ???);
            });
        }
    };
});
4

3 回答 3

5

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

并总结。

它们真的很短（每个约 4 分钟）但非常简单和有用。

PS：顺便说一句，我建议你也看其他人。它们都简短而精确，很喜欢它们。

于 2013-05-22T15:25:14.383 回答
4

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

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

和

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

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

这是一个工作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.

于 2013-05-22T15:31:47.993 回答
0

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

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

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

于 2015-08-12T18:37:35.203 回答