如何在自定义指令中获取评估的属性

Shlomi Schwartz:

我正在尝试从我的自定义指令中获取一个评估的属性,但是我找不到正确的方法。

我已经创建了这个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);
    }
});

我想念什么?

UmurKontacı:

注意:我会在找到更好的解决方案时更新此答案。只要它们仍然相关,我也会保留旧答案以供将来参考。最新最好的答案是第一位的。

更好的答案:

angularjs中的指令功能非常强大,但是要花些时间来了解它们背​​后的进程。

创建指令时,angularjs允许您创建一个隔离范围,并与父范围进行一些绑定。这些绑定由指定的属性,你附加元素在DOM和你如何定义范围在属性指令定义对象

您可以在范围内定义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 .

“仍然可以”答案:

由于此答案已被接受,但存在一些问题,因此我将其更新为更好的答案。显然,这$parse是一项不位于当前范围属性内的服务,这意味着它仅采用角度表达式而无法达到范围。{{}}表达式是在angularjs启动时编译的,这意味着当我们尝试在指令postlink方法中访问它们时,它们已经被编译。{{1+1}}已经2在指令中)。

这是您要使用的方式:

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输入)

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

旧答案:

对于那些可能像我一样被误导的人,我并没有删除它,请注意,使用它$eval是正确的正确方法,但$parse行为有所不同,在大多数情况下,您可能不需要使用它。

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

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

http://docs.angularjs.org/api/ng.$ro​​otScope.Scope#$eval

在当前范围内执行表达式,返回结果。表达式中的任何异常都会传播(未捕获)。这在评估角度表达式时很有用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在自定义组件中评估FacesComponent属性

如何在angularjs自定义指令的模板中获取属性值?

如何在自定义属性指令中获取具有数字类型的输入的值

如何在自定义指令中获取$ routeParams

在Angularjs自定义指令中获取属性的值

如何在自定义帮助程序或指令中获取Laravel中的View数据

如何在React 16.9中编写自定义属性(指令)?

如何在Angular 2.0中创建自定义验证指令(即验证属性)?

如何在自定义指令中从ng-options获取编译后的数组?

如何在angular中创建自定义指令

如何在自定义指令中检索ngmodel值

如何在自定义VueJS指令中声明变量?

如何在自定义刀片指令中传递参数?

如何在angular js中实现自定义指令?

评估自定义指令中的表达式

如何在woocommerce中的自定义产品模板上获取自定义产品属性

如何将自定义指令属性传递给Angular 1.5中的自定义指令子元素?

如何在Google Apps脚本自定义功能中获取“活动用户”的用户属性

如何在Spring JMS侦听器中从JMS消息获取自定义属性

如何在自定义操作 DLL (MSI/Wix) 中获取“已安装”属性?

如何在jQuery中通过自定义属性获取输入字段的值

如何在OpenLayers中设置和获取图层的自定义属性

如何在 Doctrine 自定义类型 convertToDatabaseValue 函数中获取列属性?

如何在反应钩子中获取自定义属性的值?

如何在php中获取html单选按钮的自定义属性值

如何在asp.net core中获取自定义属性名称?

如何从Winrt的装配中获取自定义属性

如何从 angular 5 的自定义属性中获取值?

如何从Angular中的自定义标签获取属性值