如何在angularjs中获取指令的值

时间:2014-02-09 21:53:38

标签: javascript angularjs angularjs-directive

我制作了自定义元素指令。我想知道如何从指令范围或属性中获取价值。

<my-element my-attr="??" ng-click="myFunction(VALUE_OF_MY_ATTR)" />

1 个答案:

答案 0 :(得分:1)

如果你通过指令中的双向绑定绑定myAttr,你只需将它以相同的名称传递给你的函数,因为myFunction的范围是由ngClick指令设置的。

// template
<div ng-controller="someController">
    myModel: {{ myModel }}
    <my-element my-attr="myModel" ng-click="myFunction(myModel)" />
</div>

// js
angular.module("myModule").controller("someController", function ($scope) {
    $scope.myModel = { number: 42 };
    $scope.myFunction = function (data) { console.log(data); }
}).directive("myElement", function ($interval) {
    return {
        restrict: "E",
        scope: { // define an isolated scope for you directive
            myAttr: "=", // set two-way-binding for 'my-attr'
        },
        link: function ($scope, $element, attributes) {
            // count up the number in myModel.
            // myModel can be accessed via myAttr because it is defined
            // in the scope of the directive.
            $interval(function () {
                // you can access
                $scope.myAttr.number += 1;
            }, 1000);
        }
    };
});

您可以在Plunker链接中看到一个工作示例。

重要:您无法访问指令中的$scope.myModel,因为您隔离了范围而必须使用$scope.myAttr如果您未设置范围属性获得与指令外部相同的范围,但是你没有得到简单的别名,并且必须在你自己$scope.$eval(attributes.myAttr)上评估指令属性。

Example on Plunker