web-dev-qa-db-ja.com

コントローラスコープからディレクティブへの変数の受け渡し

私のコントローラーでは、プレーンなJSオブジェクトである$scope.workerを定義しました。

{
    name: 'Peter',
    phone: 601002003
}

ディレクティブを作成しました：

.directive('phoneType', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            console.log(attrs);
        }
    };
}])

私のHTMLは次のようになります。

<span phone-type="worker.phone"></span>

worker.phone（この例では601002003）をコントローラースコープからディレクティブに渡して、linkメソッドでロジックを作成するにはどうすればよいですか？ attrs.phoneTypeは今worker.phone文字列を表示しています。

javascriptangularjsangularjs-directiveangularjs-scope
12
acid

双方向バインディングを介して値をディレクティブに渡すこともできます。

.directive('phoneType', [function () {
    return {
        scope: {
          phoneNumber: '=phoneType'
        }
        link: function (scope, element, attrs) {
            // now do stuff with the number, you can access it through the scope
            scope.phoneNumber // contains the number
        }
    };
}])

これで、分離スコープを介して番号に直接アクセスできます。テンプレートは次のようになります。

<span phone-type="worker.phone"></span>

ちなみに、制限Aは必要ありません。これがデフォルトの動作です。

26
bluenavajo