web-dev-qa-db-ja.com

angularディレクティブで補間値を設定する方法は？

ディレクティブに補間値を設定するにはどうすればよいですか？次のコードから正しい値を読み取ることができますが、設定できませんでした。

js：

app.directive('ngMyDirective', function () {
    return function(scope, element, attrs) {
        console.log(scope.$eval(attrs.ngMyDirective));

        //set the interpolated attrs.ngMyDirective value somehow!!!
    }
});

html：

<div ng-my-directive="myscopevalue"></div>

ここで、myscopevalueはコントローラーのスコープの値です。

angularjsangularjs-directiveangularjs-scope
17
Anton

スコープに値を設定したいが、プロパティの名前がわからない場合（事前に）、object[property]構文を使用できます。

scope[attrs.myNgDirective] = 'newValue';

属性の文字列にドットが含まれている場合（例：myObject.myProperty）、これは機能しません。 $evalを使用して割り当てを行うことができます。

// like calling  "myscopevalue = 'newValue'"
scope.$eval(attrs.myNgDirective + " = 'newValue'");

[更新：実際には、$parseの代わりに$evalを使用する必要があります。 マークの答え を参照してください。]

分離スコープを使用している場合は、=アノテーションを使用できます。

app.directive('ngMyDirective', function () {
    return {
        scope: {
            theValue: '=ngMyDirective'
        },
        link: function(scope, element, attrs) {
            // will automatically change parent scope value
            // associated by the variable name given to `attrs.ngMyDirective`
            scope.theValue = 'newValue';
        }
    }
});

この例は このAngular/jQueryカラーピッカーJSFiddleの例 で確認できます。ここで、ディレクティブ内のscope.colorに割り当てると、渡された変数が自動的に更新されます。 コントローラーのスコープのディレクティブ。

24
Michelle Tilley

ディレクティブが分離スコープを使用せず、属性を使用してスコーププロパティを指定し、そのプロパティの値を変更する場合は、 $ parse を使用することをお勧めします。 （構文は$ evalよりも優れていると思います。）

app.directive('ngMyDirective', function ($parse) {
    return function(scope, element, attrs) {
        var model = $parse(attrs.ngMyDirective);
        console.log(model(scope));
        model.assign(scope,'Anton');
        console.log(model(scope));
    }
});

fiddle

$parseは、属性にドットが含まれているかどうかに関係なく機能します。

45
Mark Rajcok