☰

カスタムディレクティブ内で評価された属性を取得する方法 質問する

tag-icon • tag-icon javascript binding angularjs directive
カスタムディレクティブ内で評価された属性を取得する方法 質問する

カスタム ディレクティブから評価された属性を取得しようとしていますが、正しい方法が見つかりません。

私が作ったこの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);
    }
});

何が足りないのでしょうか?

ベストアンサー1

注意: より良い解決策が見つかったら、この回答を更新します。また、関連性がある限り、将来の参照用に古い回答も保存します。最新かつ最適な回答が最初に表示されます。

より良い答え:

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現在のスコープのプロパティに存在しないサービスです。つまり、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>​​​​​​​​

ここで注意すべき点は、値の文字列を設定する場合は引用符で囲む必要があることです。(3 番目の入力を参照)

演奏するためのフィドルは次のとおりです: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.$ro​​otScope.Scope#$eval

現在のスコープで式を実行し、結果を返します。式内の例外はすべて伝播されます (キャッチされません)。これは、Angular 式を評価するときに便利です。

おすすめ記事