タグ付けされた質問 「angularjs-scope」

AngularJSでは、スコープはアプリケーションモデルを参照するオブジェクトです。式の実行コンテキストです。

6
カスタムディレクティブのスコープバインディングでの記号「@」、「＆」、「=」、「>」の使用：AngularJS
AngularJSでのカスタムディレクティブの実装でのこれらのシンボルの使用についてはたくさん読んだことがありますが、コンセプトはまだはっきりしていません。つまり、カスタムディレクティブでスコープ値の1つを使用するとはどういう意味ですか？ var mainApp = angular.module("mainApp", []); mainApp.directive('modalView',function(){ return{ restrict:'E', scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true } }); コードスニペットを実行する結果を非表示スニペットを展開 ここのスコープで正確に何をしているのですか？ また、公式ドキュメントに"scope： '>'"が存在するかどうかもわかりません。私のプロジェクトで使用されています。 編集-1 「scope： '>'」の使用は私のプロジェクトの問題であり、修正されました。
11
js関数の外部からのAngularJSアクセススコープ
外部のJavaScript関数を介してコントローラーの内部スコープにアクセスする簡単な方法があるかどうかを確認しようとしています（完全にターゲットコントローラーとは無関係です）。 私はここで他のいくつかの質問を見てきました angular.element("#scope").scope(); DOM要素からスコープを取得しますが、現在のところ、適切な結果が得られていません。 ここにjsfiddleがあります：http ://jsfiddle.net/sXkjc/5/ 私は現在、プレーンなJSからAngularへの移行を行っています。私がこれを達成しようとしている主な理由は、元のライブラリコードをできるだけそのままにしておくためです。コントローラに各機能を追加する必要がなくなります。 これを達成する方法を教えてください。上記のフィドルについてのコメントも歓迎します。
1
AngularJSで双方向フィルタリングを行う方法は？
AngularJSで実行できる興味深いことの1つは、特定のデータバインディング式にフィルターを適用することです。これは、たとえば、カルチャ固有の通貨やモデルのプロパティの日付形式を適用するのに便利な方法です。スコープに計算されたプロパティがあると便利です。問題は、これらの機能がどちらも双方向データバインディングシナリオでは機能しないことです。スコープからビューへの一方向データバインディングのみです。これは、他の点では優れたライブラリでの明らかな省略のようです-または何かが欠けていますか？ でKnockoutJS、私は私は、プロパティの値を取得するために呼び出され1、およびプロパティが設定されたときに呼び出されるものを関数のペアを指定することができ、読み取り/書き込み計算プロパティを、作成することができます。これにより、たとえば、カルチャ対応の入力を実装できます。ユーザーが「$ 1.24」と入力して、それをViewModelのフロートに解析し、ViewModelの変更を入力に反映させます。 これに似ていると私が見つけることができる最も近いものは、$scope.$watch(propertyName, functionOrNGExpression);これを使用することです。これにより、プロパティの$scope変更時に関数を呼び出すことができます。しかし、これは、たとえば、文化を意識した入力の問題を解決しません。メソッド自体の$watched中でプロパティを変更しようとすると、問題に注意してください$watch。 $scope.$watch("property", function (newValue, oldValue) { $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue; $scope.property = Globalize.parseFloat(newValue); }); （http://jsfiddle.net/gyZH8/2/） ユーザーが入力を開始すると、入力要素は非常に混乱します。プロパティを2つのプロパティに分割し、1つは解析されていない値用、もう1つは解析された値用に改善しました。 $scope.visibleProperty= 0.0; $scope.hiddenProperty = 0.0; $scope.$watch("visibleProperty", function (newValue, oldValue) { $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue; …
14
コントローラは関数ではなく、未定義になりましたが、コントローラをグローバルに定義しています
angularjsを使用したサンプルアプリケーションを書いています。Chromeブラウザで以下のエラーが発生しました。 エラーは エラー：[ng：areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined これは 引数「ContactController」は関数ではないため、定義されていません コード <!DOCTYPE html> <html ng-app> <head> <script src="../angular.min.js"></script> <script type="text/javascript"> function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } </script> </head> <body> <h1> modules sample </h1> <div ng-controller="ContactController"> Email:<input type="text" ng-model="newcontact"> <button ng-click="add()">Add</button> <h2> Contacts </h2> …
10
選択したng-optionが変更されたときに値を取得します
.htmlページにドロップダウンリストがあります。 落ちる： <select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"> <option value="">Select Account</option> </select> ユーザーが値を選択したときにアクションを実行したい。だから私のコントローラーでは： コントローラ： $scope.$watch('blisterPackTemplateSelected', function() { alert('changed'); console.log($scope.blisterPackTemplateSelected); }); ただし、ドロップダウンリストの値を変更しても、コードはトリガーされません。 $scope.$watch('blisterPackTemplateSelected', function() その結果ng_change = 'changedValue()'、selectタグで：を使用して別の方法を試しました そして 関数： $scope.changedValue = function() { console.log($scope.blisterPackTemplateSelected); } ただし、これblisterPackTemplateSelectedは子スコープに格納されます。親が子スコープにアクセスできないことを読みました。 ドロップダウンリストで選択した値が変更されたときに何かを実行する正しい/最良の方法は何ですか？方法1の場合、コードで何が問題になっていますか？
5
AngularJSの親スコープ変数を更新する
2つのコントローラーがあり、1つは別のコントローラーにラップされています。これで、子スコープが親スコープからプロパティを継承することがわかりましたが、親スコープ変数を更新する方法はありますか？これまでのところ、明確な解決策はありません。 私の状況では、フォーム内にカレンダーコントローラがあります。送信時にフォームに開始日と終了日が含まれるように、親スコープ（フォーム）から開始日と終了日を更新したいと思います。
4
現在のスコープをAngularJSサービスに渡す
「現在の」$scopeをAngularJSサービスに渡すことは正しいですか？ $ serviceが1つのコントローラーでのみ使用されていることを知っている状況で、$ serviceメソッド自体にコントローラーのスコープへの参照が必要です。 これは哲学的に正しいですか？ または、イベントを$ rootScopeにブロードキャストしてから、コントローラーがそれらをリッスンするほうがよいですか？
5
AngularJS：モデル要素がモデル配列からスプライスされたときにng-repeatリストが更新されない
2つのコントローラーがあり、それらの間でapp.factory関数を使用してデータを共有しています。 最初のコントローラーは、リンクをクリックすると、モデル配列（pluginsDisplayed）にウィジェットを追加します。ウィジェットが配列にプッシュされ、この変更がビューに反映されます（ng-repeatを使用して配列の内容を表示します）。 <div ng-repeat="pluginD in pluginsDisplayed"> <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div> </div> ウィジェットは、k2plugin、remove、およびresizeの3つのディレクティブに基づいて構築されています。removeディレクティブは、k2pluginディレクティブのテンプレートにスパンを追加します。上記のスパンをクリックすると、共有配列への正しい要素がで削除されArray.splice()ます。共有配列は正しく更新されますが、変更はビューに反映されません。ただし、別の要素が追加されると、削除後にビューが正しく更新され、以前に削除された要素は表示されません。 何が問題になっていますか？これが機能しない理由を教えてください。AngularJSで私がしようとしていることを行うためのより良い方法はありますか？ これは私のindex.htmlです： <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"> </script> <script src="main.js"></script> </head> <body> <div ng-app="livePlugins"> <div ng-controller="pluginlistctrl"> <span>Add one of {{pluginList.length}} plugins</span> <li ng-repeat="plugin in pluginList"> <span><a href="" ng-click="add()">{{plugin.name}}</a></span> </li> </div> <div ng-controller="k2ctrl"> <div ng-repeat="pluginD in pluginsDisplayed"> <div …
9
オブジェクトが空かどうかの確認、ng-showでは機能しますが、コントローラーでは機能しませんか？
私はそのように宣言されたJSオブジェクトを持っています $scope.items = {}; このオブジェクトをアイテムで満たす$ httpリクエストもあります。このアイテムが空かどうかを検出したいのですが、ng-showがこれをサポートしているようです...入力します ng-show="items" 魔法のように機能します。コントローラからも同じようにしたいのですが、機能させることができないようです。プロパティがあるかどうかを確認するためにオブジェクトを反復処理したり、lodashやアンダースコアを使用したりする必要があるようです。 。 代わりはありますか？ 私は試しました alert($scope.items == true); ただし、オブジェクトが作成され、が入力された場合は常にfalseを返す$httpため、そのようには機能しません。
7
コントローラーをAngularJSの別のコントローラーに挿入するにはどうすればよいですか？
私はAngularを初めて使用し、方法を理解しようとしています... AngularJSを使用して、別のコントローラー内で使用されるコントローラーをどのように注入できますか？ 次のスニペットがあります。 var app = angular.module("testApp", ['']); app.controller('TestCtrl1', ['$scope', function ($scope) { $scope.myMethod = function () { console.log("TestCtrl1 - myMethod"); } }]); app.controller('TestCtrl2', ['$scope', 'TestCtrl1', function ($scope, TestCtrl1) { TestCtrl1.myMethod(); }]); これを実行すると、エラーが発生します。 Error: [$injector:unpr] Unknown provider: TestCtrl1Provider <- TestCtrl1 http://errors.angularjs.org/1.2.21/$injector/unpr?p0=TestCtrl1Provider%20%3C-%20TestCtrl1 別のコントローラーの内部でコントローラーを使用しようとしているか、これをサービスにする必要がありますか？
2
ディレクティブはAngularJSのng-repeatスコープでスコープを分離します
（他の場所でディレクティブを再利用できるように）分離スコープを持つディレクティブがありng-repeat、このディレクティブをで使用すると、機能しません。 このトピックに関するすべてのドキュメントとスタックオーバーフローの回答を読み、問題を理解しました。通常の問題をすべて回避できたと思います。 したがって、ng-repeatディレクティブによって作成されたスコープが原因でコードが失敗することを理解しています。私自身のディレクティブは、isolateスコープを作成し、親スコープ内のオブジェクトに双方向のデータバインディングを行います。私のディレクティブは、このバインドされた変数に新しいオブジェクト値を割り当てます。これは、私のディレクティブを使用しない場合ng-repeat（親変数が正しく更新される場合）に完全に機能します。ただし、ng-repeatでは、割り当てによってng-repeatスコープ内に新しい変数が作成され、親変数には変更が反映されません。これはすべて、私が読んだ内容に基づいて予想どおりです。 また、特定の要素に複数のディレクティブがある場合、1つのスコープのみが作成されることも読みました。そしてpriority、各ディレクティブにa を設定して、ディレクティブが適用される順序を定義できます。ディレクティブは優先度でソートされてから、それらのコンパイル関数が呼び出されます（http://docs.angularjs.org/guide/directiveで優先度という単語を検索してください）。 したがって、優先順位を使用してディレクティブが最初に実行され、最終的に分離スコープが作成されるようにし、ng-repeat実行時に親スコープからプロトタイプを継承するスコープを作成する代わりに分離スコープを再利用できることを望んでいました。ng-repeatドキュメントは、優先レベルでそのディレクティブの実行と述べています1000。1優先度が高いか低いかは不明です。1ディレクティブで優先度を使用しても違いはないので、試してみました2000。しかし、それは事態をさらに悪化させます。私の双方向のバインディングがなりundefined、私のディレクティブは何も表示しません。 私は自分の問題を示すためのフィドルを作成しました。priorityディレクティブの設定をコメントアウトしました。名前オブジェクトのリストと、名前オブジェクトのname-row姓名フィールドを表示するという名前のディレクティブがあります。表示された名前をクリックselectedすると、メインスコープに変数を設定して欲しい。名前の配列、selected変数はname-row双方向のデータバインディングを使用してディレクティブに渡されます。 メインスコープで関数を呼び出すことでこれを機能させる方法を知っています。また、selectedが別のオブジェクトの内部にあり、外部オブジェクトにバインドすると、問題が発生しないことも知っています。しかし、私は現時点ではそれらの解決策には興味がありません。 代わりに、私が持っている質問は次のとおりです。 どうやって防ぐか ng-repeat親スコープからプロトタイプ的に継承するスコープを作成せずに、ディレクティブの分離スコープを使用するにはですか？ なぜ優先レベルなのか 2000ディレクティブのしないのですか？ バタランを使用して、どのタイプのスコープが使用されているかを知ることは可能ですか？
4
AngularJSでスコープを分離せずにディレクティブからコントローラー関数を呼び出す
分離スコープを使用せずに、ディレクティブ内から親スコープの関数を呼び出す方法を見つけることができないようです。分離スコープを使用する場合、分離で "＆"を使用して親スコープの関数にアクセスできることを知っていますが、必要がないときに分離スコープを使用すると影響があります。次のHTMLについて考えてみます。 <button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button> この簡単な例では、JavaScriptの確認ダイアログを表示し、確認ダイアログで[OK]をクリックした場合にのみdoIt（）を呼び出します。これは、分離されたスコープを使用して簡単です。ディレクティブは次のようになります。 .directive('confirm', function () { return { restrict: 'A', scope: { confirm: '@', confirmAction: '&' }, link: function (scope, element, attrs) { element.bind('click', function (e) { if (confirm(scope.confirm)) { scope.confirmAction(); } }); } }; }) しかし問題は、私が分離スコープを使用しているため、上の例のng-hideは親スコープに対して実行されず、分離スコープで実行されることです（ディレクティブで分離スコープを使用すると、その要素のすべてのディレクティブが分離スコープを使用します）。以下は、 ng-hideが機能しない上記の例のjsFiddleです。（このフィドルでは、入力ボックスに「yes」と入力すると、ボタンが非表示になることに注意してください。） 代わりに、分離されたスコープを使用しないこともできます。これは、このディレクティブのスコープを分離する必要がないため、実際にここで本当に必要なものです。私が持っている唯一の問題は、分離されたスコープに渡さない場合、親スコープのメソッドをどのように呼び出すのですか？ これは、孤立スコープを使用していないng-hideのjsfiddleですが、もちろん ng-hideは正常に動作していますが、confirmAction（）の呼び出しは機能せず、動作させる方法がわかりません。 注意してください、私が本当に探している答えは、分離されたスコープを使用せずに外部スコープの関数を呼び出す方法です。また、この確認のポイントは、外部スコープを呼び出す方法を理解し、それでも他のディレクティブを親スコープに対して機能させることができるためです。 …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.