将变量从控制器范围传递到指令

时间:2013-07-12 10:35:59

标签: javascript angularjs angularjs-directive angularjs-scope

在我的控制器中,我定义了$scope.worker这是一个普通的JS对象:

{
    name: 'Peter',
    phone: 601002003
}

我已经创建了一个指令:

.directive('phoneType', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            console.log(attrs);
        }
    };
}])

我的HTML看起来像这样:

<span phone-type="worker.phone"></span>

如何将worker.phone(在此示例中为601002003)从控制器范围传递给指令,以便我可以在link方法中创建逻辑? attrs.phoneType现在显示worker.phone字符串。

1 个答案:

答案 0 :(得分:26)

您还可以通过双向绑定将值传递给指令:

.directive('phoneType', [function () {
    return {
        scope: {
          phoneNumber: '=phoneType'
        }
        link: function (scope, element, attrs) {
            // now do stuff with the number, you can access it through the scope
            scope.phoneNumber // contains the number
        }
    };
}])

现在您可以直接通过隔离范围访问该号码。 模板看起来像这样:

<span phone-type="worker.phone"></span>

顺便说一句,您不需要限制A.这是默认行为。