如何获得自定义指令内部评估属性 [英] How to get evaluated attributes inside a custom directive

问题描述

我试图得到一个评估从我的自定义指令属性，但我找不到这样做的正确方法。

I'm trying to get an evaluated attribute from my custom directive, but I can't find the right way of doing it.

我创建此的jsfiddle 的详细说明。

<div ng-controller="MyCtrl">
    <input my-directive value="123">
    <input my-directive value="{{1+1}}">
</div>

myApp.directive('myDirective', function () {
    return function (scope, element, attr) {
        element.val("value = "+attr.value);
    }
});

我是什么失踪？

推荐答案

的注意：因为我发现更好的解决方案我不更新这个答案。我还留着以备将来参考答案，老，只要他们保持关系。最新，最好的回答是第一位的。的

在angularjs指令是非常强大，但它需要时间来COM prehend它处理它们背后的谎言。

Directives in angularjs are very powerful, but it takes time to comprehend which processes lie behind them.

在创建指令，angularjs允许你创建的隔离范围的一些绑定到父范围。这些绑定是由属性指定您可以将元素在DOM和你如何定义的范围在属性的指令定义对象的

While creating directives, angularjs allows you to create an isolated scope with some bindings to the parent scope. These bindings are specified by the attribute you attach the element in DOM and how you define scope property in the directive definition object.

有3种类型的结合，您可以在范围定义选项，你写那些为prefixes相关的属性。

There are 3 types of binding options which you can define in scope and you write those as prefixes related attribute.

angular.module("myApp", []).directive("myDirective", function () {
    return {
        restrict: "A",
        scope: {
            text: "@myText",
            twoWayBind: "=myTwoWayBind",
            oneWayBind: "&myOneWayBind"
        }
    };
}).controller("myController", function ($scope) {
    $scope.foo = {name: "Umur"};
    $scope.bar = "qwe";
});

的 HTML 的

<div ng-controller="myController">
    <div my-directive my-text="hello {{ bar }}" my-two-way-bind="foo" my-one-way-bind="bar">
    </div>
</div>

在这种情况下，在指令的范围（无论是在连接功能或控制器），我们就可以访问这样这些属性：

In that case, in the scope of directive (whether it's in linking function or controller), we can access these properties like this:

/* Directive scope */

in: $scope.text
out: "hello qwe"
// this would automatically update the changes of value in digest
// this is always string as dom attributes values are always strings

in: $scope.twoWayBind
out: {name:"Umur"}
// this would automatically update the changes of value in digest
// changes in this will be reflected in parent scope

// in directive's scope
in: $scope.twoWayBind.name = "John"

//in parent scope
in: $scope.foo.name
out: "John"


in: $scope.oneWayBind() // notice the function call, this binding is read only
out: "qwe"
// any changes here will not reflect in parent, as this only a getter .

还行答：

由于这个答案被录取了，但有一些问题，我将它升级到一个更好的。显然， $解析是不存在于当前的范围，这意味着它只需角前pressions并不能达到范围性质的服务。
{{，}} 前pressions的同时angularjs发起，这意味着，当我们试图访问这些编译我们的指令 postlink 方法，他们已经编译。 （ {{1 + 1} 是 2 在指令的话）。

"Still OK" Answer:

Since this answer got accepted, but has some issues, I'm going to update it to a better one. Apparently, $parse is a service which does not lie in properties of the current scope, which means it only takes angular expressions and cannot reach scope. {{,}} expressions are compiled while angularjs initiating which means when we try to access them in our directives postlink method, they are already compiled. ({{1+1}} is 2 in directive already).

这是你将要如何使用：

var myApp = angular.module('myApp',[]);

myApp.directive('myDirective', function ($parse) {
    return function (scope, element, attr) {
        element.val("value=" + $parse(attr.myDirective)(scope));
    };
});

function MyCtrl($scope) {
    $scope.aaa = 3432;
}​

<div ng-controller="MyCtrl">
    <input my-directive="123">
    <input my-directive="1+1">
    <input my-directive="'1+1'">
    <input my-directive="aaa">
</div>​​​​​​​​

这里，应该注意的一件事是，如果你想设置的值的字符串，你应该把它包在引号。 （见第3个输入）

One thing you should notice here is that, if you want set the value string, you should wrap it in quotes. (See 3rd input)

下面是拉小提琴： http://jsfiddle.net/neuTA/6/

的我不是谁可以被误导我一样乡亲删除此，请注意，使用 $ EVAL 是完全没有做正确的方式，但 $解析有不同的行为，你可能不会需要这在大多数情况下使用。的

I'm not removing this for folks who can be misled like me, note that using $eval is perfectly fine the correct way to do it, but $parse has a different behavior, you probably won't need this to use in most of the cases.

做到这一点的方法是，再次使用范围。$ EVAL 。它不仅编译角前pression，它也获得了当前范围的属性。

The way to do it is, once again, using scope.$eval. Not only it compiles the angular expression, it has also access to the current scope's properties.

var myApp = angular.module('myApp',[]);

myApp.directive('myDirective', function () {
    return function (scope, element, attr) {
        element.val("value = "+ scope.$eval(attr.value));
    }
});

function MyCtrl($scope) {

}​

你所缺少的是 $ EVAL 。

<一个href=\"http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval\">http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval

在执行当前范围返回结果的前pression。在EX pression任何异常传播（未捕获）。评估前角pressions时，这是非常有用的。

Executes the expression on the current scope returning the result. Any exceptions in the expression are propagated (uncaught). This is useful when evaluating angular expressions.

这篇关于如何获得自定义指令内部评估属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！