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

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


6
AngularJSで$ scope。$ watchと$ scope。$ applyを使用するにはどうすればよいですか?
私が使用方法を理解していない$scope.$watchと$scope.$apply。公式ドキュメントは役に立ちません。 私が具体的に理解していないこと: それらはDOMに接続されていますか? モデルのDOM変更を更新するにはどうすればよいですか? それらの間の接続点は何ですか? 私はこのチュートリアルを試しましたが、それは理解$watchと$apply当たり前のことです。 何をし$apply、何を$watchし、どのように適切に使用しますか?

18
AngularJSのディレクティブスコープの「@」と「=」の違いは何ですか?
このトピックに関するAngularJSのドキュメントを注意深く読み、次にディレクティブをいじっています。こちらがフィドルです。 そしてここにいくつかの関連するスニペットがあります: HTMLから: <pane bi-title="title" title="{{title}}">{{text}}</pane> ペインディレクティブから: scope: { biTitle: '=', title: '@', bar: '=' }, 取得できないことがいくつかあります。 なぜ"{{title}}"with '@'と"title"一緒に使用する必要があるの'='ですか? 要素を属性で装飾せずに、親スコープに直接アクセスすることもできますか? ドキュメントには、「式を介して分離されたスコープから親スコープにデータを渡すことが望ましい場合が多い」とありますが、双方向バインディングでもうまく機能するようです。なぜ発現経路の方が良いのでしょうか? 式の解決策を示す別のフィドルも見つけました:http : //jsfiddle.net/maxisam/QrCXh/

7
AngularJSコントローラーの 'this'と$ scope
AngularJSのホームページの「Create Components」セクションに、次の例があります。 controller: function($scope, $element) { var panes = $scope.panes = []; $scope.select = function(pane) { angular.forEach(panes, function(pane) { pane.selected = false; }); pane.selected = true; } this.addPane = function(pane) { if (panes.length == 0) $scope.select(pane); panes.push(pane); } } selectメソッドがに追加されている$scopeが、addPaneメソッドがに追加されていることに注意してくださいthis。に変更すると$scope.addPane、コードが壊れます。 ドキュメントには実際には違いがあると書かれていますが、違いが何であるかについては触れられていません: Angularの以前のバージョン(1.0 RC以前)thisでは、$scopeメソッドと互換的に使用できましたが、これは当てはまりません。スコープに定義されたメソッドの内部thisと$scope(角セットは互換性がありますthisに$scopeではなく、それ以外の場合は、あなたのコントローラのコンストラクタの内部で、)。 どのようにthisして$scopeAngularJSのコントローラで動作しますか?

28
AngularJS:$ scope。$ apply()を呼び出すときにすでに進行中のエラー$ digestを防止します
Angularでアプリケーションを構築してから、ページをスコープに手動で更新する必要があることがわかりました。 これを行うために知っている唯一の方法$apply()は、コントローラーとディレクティブのスコープから呼び出すことです。これの問題は、次のようなエラーがコンソールにスローされ続けることです。 エラー:$ digestはすでに進行中です このエラーを回避する方法、または同じことを異なる方法で達成する方法を誰かが知っていますか?

9
AngularJSは子コントローラーから親スコープにアクセスします
コントローラを使用してセットアップしました data-ng-controller="xyzController as vm" 親/子のネストされたコントローラーを使用するシナリオがあります。を使用してネストされたhtmlの親プロパティにアクセスしても問題$parent.vm.propertyはありませんが、子コントローラ内から親プロパティにアクセスする方法を理解できません。 $ scopeを挿入してを使用しようとしました$scope.$parent.vm.propertyが、これは機能しませんか? 誰かアドバイスをいただけますか?

6
$ rootScope。$ broadcastと$ scope。$ emit
今の性能差ということ$broadcastとが$emit排除されている、好むために何らかの理由がある$scope.$emitには$rootScope.$broadcast? はい、そうです。 $emit スコープ階層(上向き)に制限されています-これは、設計に適合している場合は良いかもしれませんが、かなり恣意的な制限のようです。 $rootScope.$broadcastイベントに耳を傾けることを選択するすべての人に働きかけます。これは私の心の中でより賢明な制限です。 何か不足していますか? 編集: 答えを明確にするために、発送の方向は私が求めている問題ではありません。$scope.$emitイベントを上方向、および$scope.$broadcast下方向にディスパッチします。しかし、なぜ$rootScope.$broadcastすべての意図されたリスナーに到達するために常に使用しないのですか?

8
$ watchオブジェクト
辞書の変更を監視したいのですが、何らかの理由で監視コールバックが呼び出されません。 ここに私が使用するコントローラーがあります: function MyController($scope) { $scope.form = { name: 'my name', surname: 'surname' } $scope.$watch('form', function(newVal, oldVal){ console.log('changed'); }); } こちらがバイオリンです。 名前または姓が変更されるたびに$ watchコールバックが呼び出されることを期待していますが、それは起こりません。 それを行う正しい方法は何ですか?


5
AngularJSでディレクティブを記述する場合、新しいスコープ、新しい子スコープ、または新しい分離スコープが必要かどうかをどのように判断しますか?
新しいディレクティブを作成するときに使用するスコープのタイプを決定するのに役立つガイドラインを探しています。理想的には、一連の質問を案内して正しい答えを表示するフローチャートに似たものを望みます。新しい新しいスコープ、新しい子スコープ、または新しい分離スコープはありませんが、多すぎると思われます。これが私の現在のちょっとしたガイドラインです: ディレクティブを使用する要素がng-model を使用する場合は分離スコープを使用しないでください。分離スコープでng-model を使用できますか?を参照してください。そして なぜフォーマッタは孤立範囲では動作しませんか? ディレクティブがスコープ/モデルプロパティを変更しない場合は、新しいスコープを作成しないでください ディレクティブが一連のDOM要素をカプセル化している場合、分離スコープはうまく機能するようです(ドキュメントは「複雑なDOM構造」と記載されている)、ディレクティブが要素として使用される場合、または同じ要素に他のディレクティブがない。 要素に分離スコープを持つディレクティブを使用すると、同じ要素の他のすべてのディレクティブが同じ(1)分離スコープを使用するように強制されるので、分離スコープを使用できる場合、これは厳しく制限されませんか? Angular-UIチームのメンバー(または多くのディレクティブを作成した他のチーム)が経験を共有できることを願っています。 「再利用可能なコンポーネントには分離されたスコープを使用する」という単純な答えを追加しないでください。

8
Angularで$ rootScopeを使用して変数を格納するにはどうすればよいですか?
$rootScope後で別のコントローラーにアクセスしたいコントローラーに変数を格納するにはどうすればよいですか?例えば: angular.module('myApp').controller('myCtrl', function($scope) { var a = //something in the scope //put it in the root scope }); angular.module('myApp').controller('myCtrl2', function($scope) { var b = //get var a from root scope somehow //use var b }); どうすればいいですか?

5
AngularJSでモデルの変更を監視するときに、初期ロードを無視するにはどうすればよいですか?
$ scope.fieldcontainerプロパティの深いグラフとして表示される単一のエンティティのエディターとして機能するWebページがあります。($ resourceを介して)REST APIから応答を受け取った後、 'fieldcontainer'にウォッチを追加します。このウォッチを使用して、ページ/エンティティが「ダーティ」かどうかを検出しています。現在、保存ボタンをバウンスさせていますが、ユーザーがモデルを汚すまで保存ボタンを非表示にしたいのです。 私が取得しているのは、時計の単一トリガーです。これは、.fieldcontainer = ...割り当てが時計を作成した直後に行われるために発生していると思います。最初の誤警報を吸収するために「dirtyCount」プロパティを使用することを考えていましたが、それは非常にハックに感じられます...そしてこれを処理するには「角度慣用的」な方法が必要であると考えました-私だけではありません汚れたモデルを検出するために時計を使用する。 時計を設定するコードは次のとおりです。 $scope.fieldcontainer = Message.get({id: $scope.entityId }, function(message,headers) { $scope.$watch('fieldcontainer', function() { console.log("model is dirty."); if ($scope.visibility.saveButton) { $('#saveMessageButtonRow').effect("bounce", { times:5, direction: 'right' }, 300); } }, true); }); 「UI(dirtyCount> 0)」で私の「UIダーティ」コードを保護するよりも、これを行うためのよりクリーンな方法があるはずだと考え続けています...

4
ng-includeを使用するとスコープが失われる
私はこのモジュールのルートを持っています: var mainModule = angular.module('lpConnect', []). config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/home', {template:'views/home.html', controller:HomeCtrl}). when('/admin', {template:'views/admin.html', controller:AdminCtrl}). otherwise({redirectTo:'/connect'}); }]); ホームHTML: <div ng-include src="views.partial1"></div> partial1 HTML: <form ng-submit="addLine()"> <input type="text" ng-model="lineText" size="30" placeholder="Type your message here"> </form> HomeCtrl: function HomeCtrl($scope, $location, $window, $http, Common) { ... $scope.views = { partial1:"views/partial1.html" }; …

5
角度ディレクティブは、ディレクティブの属性で指定された式の関数に引数を渡すことができますか?
特定のcallback属性を分離スコープで使用するフォームディレクティブがあります。 scope: { callback: '&' } それは内部にあるng-repeatので、私が渡す式にはid、コールバック関数への引数としてオブジェクトのが含まれています。 <directive ng-repeat = "item in stuff" callback = "callback(item.id)"/> ディレクティブを使い終えると、$scope.callback()コントローラー関数から呼び出されます。ほとんどの場合、これで問題ありませんし、やりたいことはこれだけですが、場合によっては、directiveそれ自体の内部から別の引数を追加したいこともあります。 これを可能にする角度式はありますか:$scope.callback(arg2)、callbackで呼び出されarguments = [item.id, arg2]ますか? そうでない場合、これを行うための最も近い方法は何ですか? これが機能することがわかりました: <directive ng-repeat = "item in stuff" callback = "callback" callback-arg="item.id"/> と scope { callback: '=', callbackArg: '=' } ディレクティブ呼び出し $scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) ); しかし、私はそれが特にきちんとしているとは思いません、それは分離スコープに余分なものを置くことを含みます。 もっと良い方法はありますか? ここにプランカー遊び場があります(コンソールを開いたままにします)。

10
Angularjs: '構文としてのコントローラー'と$ watch
controller as構文を使用するときにプロパティの変更をサブスクライブするにはどうすればよいですか? controller('TestCtrl', function ($scope) { this.name = 'Max'; this.changeName = function () { this.name = new Date(); } // not working $scope.$watch("name",function(value){ console.log(value) }); }); <div ng-controller="TestCtrl as test"> <input type="text" ng-model="test.name" /> <a ng-click="test.changeName()" href="#">Change Name</a> </div>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.