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

Question

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

我创建了 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);
    }
});

我错过了什么？

Answer 1

注意:当我找到更好的解决方案时，我会更新此答案。只要它们保持相关，我也会保留旧答案以供将来引用。最新最好的答案是第一位的。

更好的答案:

angularjs 中的指令非常强大，但需要时间来理解它们背后的进程。

在创建指令时，angularjs 允许您创建一个隔离范围，其中包含一些与父范围的绑定(bind)。这些绑定(bind)由您在 DOM 中附加元素的 属性 以及如何在 指令定义对象 中定义 scope 属性来指定。

您可以在范围内定义 3 种类型的绑定(bind)选项，并将它们写为与前缀相关的属性。

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>

在这种情况下，在指令的范围内(无论是在链接函数还是 Controller 中)，我们可以像这样访问这些属性:

/* 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 是一项服务，它不存在于当前作用域的属性中，这意味着它只需要 Angular 表达式而无法到达作用域。 {{,}} 表达式是在 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>​​​​​​​​

您应该注意的一件事是，如果您想设置值字符串，您应该将它用引号引起来。 (见第三个输入)

这里是 fiddle :http://jsfiddle.net/neuTA/6/

旧答案:

我不会为像我这样被误导的人删除它，请注意使用 $eval 是完全正确的正确方法，但是 $parse 具有不同的行为，在大多数情况下您可能不需要使用它。

再次使用 scope.$eval 的方法是。它不仅编译 Angular 表达式，还可以访问当前作用域的属性。

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.$rootScope.Scope#$eval

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.