[解決済み] AngularJSのスコープ変数をディレクティブからコントローラに渡す最も簡単な方法とは?
2022-11-29 01:40:34
質問
ディレクティブからコントローラにAngularJSのスコープ変数を渡す最も簡単な方法は何でしょうか? 私が見たすべての例はとても複雑に見えますが、ディレクティブからコントローラにアクセスし、そのスコープ変数を設定する方法はないのでしょうか?
どのように解決するのですか?
2014/8/25に編集しました。 ここで はフォークしたところです。
ありがとう、@anvarik。
以下は JSFiddle . これをどこでフォークしたのか忘れてしまいました。しかし、これは = と @ の違いを示す良い例です。
<div ng-controller="MyCtrl">
<h2>Parent Scope</h2>
<input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
<br><br>
<!-- attribute-foo binds to a DOM attribute which is always
a string. That is why we are wrapping it in curly braces so
that it can be interpolated. -->
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<h2>Attribute</h2>
<div>
<strong>get:</strong> {{isolatedAttributeFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedAttributeFoo">
<i>// This does not update the parent scope.</i>
</div>
<h2>Binding</h2>
<div>
<strong>get:</strong> {{isolatedBindingFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedBindingFoo">
<i>// This does update the parent scope.</i>
</div>
<h2>Expression</h2>
<div>
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
<i>// And this calls a function on the parent scope.</i>
</div>
</my-component>
</div>
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'@attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
}
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.foo = 'Hello!';
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
関連
-
[解決済み] AngularJSのコントローラ作成時にパラメータを渡すことは可能ですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] 子コントローラから親スコープにアクセスするAngularJS
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み] AngularJSで独自のスコープ*を持つカスタムディレクティブ内から親スコープにアクセスするにはどうすればよいですか?
-
[解決済み】AngularJSで属性を条件付きで適用するための最良の方法は何ですか?
-
[解決済み】AngularJSでディレクティブを書くとき、新しいスコープ、新しい子スコープ、または新しい分離されたスコープが必要であるかどうかは、どのように決定するのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSで$httpリクエスト中にスピナーGIFを表示する?
-
[解決済み] angularのpostリクエストでpreflightのレスポンスがHTTPステータスコード403で不正になる。
-
[解決済み] ReferenceError: Angularは定義されていません。
-
[解決済み] AngularJsでng-Cloakディレクティブを実際に使用する方法とは?
-
angularjs統合ueditor入門
-
[解決済み] どのように$state.goにパラメータを追加しますか?
-
[解決済み] AngularJSの.$on()とは?
-
[解決済み] ng-classを使った複数クラスの追加
-
[解決済み] カスタムディレクティブの中で評価された属性を取得する方法
-
[解決済み] AngularJSで独自のスコープ*を持つカスタムディレクティブ内から親スコープにアクセスするにはどうすればよいですか?