angularjs – 如何获取自定义指令内的评估属性

前端之家收集整理的这篇文章主要介绍了angularjs – 如何获取自定义指令内的评估属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图从我的自定义指令获得一个评估的属性,但我找不到正确的方式做。

我创建了this 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中的指令非常强大,但是需要时间来理解哪些进程在它们后面。

在创建指令时,angularjs允许您创建一个与父作用域有一些绑定的孤立作用域。这些绑定由您在DOM中附加元素的属性指定,以及如何在指令定义对象中定义scope属性

有3种类型的绑定选项,您可以在范围中定义它们,并将它们作为前缀相关属性写入。

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>

在这种情况下,在指令的范围(无论是在链接函数还是控制器),我们可以访问这些属性,如下所示:

/* 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 .

“仍然OK”答案:

因为这个答案被接受了,但有一些问题,我要更新一个更好的。显然,$ parse是一个不在当前范围的属性中的服务,这意味着它只使用角度表达式,不能到达范围。
{{,}}表达式是在angularjs启动时编译的,这意味着当我们尝试在我们的指令postlink方法中访问它们时,它们已经被编译。 ({{1 1}}已经是2的指令)。

这是你想要使用的方式:

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

myApp.directive('myDirective',function ($parse) {
    return function (scope,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>​​​​​​​​

你应该注意到的一件事是,如果你想设置值字符串,你应该用引号包装。 (见第三个输入)

这里是玩弄的小提琴:http://jsfiddle.net/neuTA/6/

老答案:

我不会删除这个可以被误导像我一样的人,注意使用$ eval是完全正确的方法,但$ parse有不同的行为,你可能不需要这个在大多数案件。

方法是,再次使用scope。$ eval。它不仅编译角度表达式,还可以访问当前范围的属性

var myApp = angular.module('myApp',attr) {
        element.val("value = "+ scope.$eval(attr.value));
    }
});

function MyCtrl($scope) {

}​

你缺少的是$ eval。

07001

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.

猜你在找的Angularjs相关文章