月別アーカイブ: 2 月 2015

角度指令のトラブルシューティング ヒント (または, もう一度すべての上にハイフンを愛する学習)

私はそのように $http.get のアプリのカップルを持っています。() 呼び声と私の醜いエラーの詳細を非表示をきれいにフォーマットされたエラー メッセージを表示することができると思った, しかし、アクセスできます。  基本的には, この:

image

その後、ユーザーのクリックした場合、エラー, さらに詳しい情報を見る:

image

シンプルなもの。  正確な同じ潜在的なエラーはエンドユーザー画面だけでなく、管理画面に表示できるので, それは明らかにカスタム角度指令と呼ばれます。  私は  これを発見しました。 優れたシリーズ 記事 (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) 偉大な投稿 ダン ・ Wahlin.  彼のアドバイスに従う, 私は非常に迅速に作成します。 <こんにちは世界> ディレクティブと私より複雑なエラー表示スキージに移動. このより複雑なディレクティブとのトラブルのビットに走った。  幸いにも, 偶然のを並べ替え, WebStorm を伝えていた (これらの日を使用するエディター) JS ファイルは、角度のファイルと、それは助けて問題を把握します。  これは自体ディレクティブのコードです。:

angular.module("CDLApp").ディレクティブ("generalCdlErrorHandler", 関数() {

戻り値 {
制限します。: "E",
置換: true,

スコープ: {
retrieveLastConfigurationError: "&"
},

テンプレート:
'<div クラス ="アラート警告危険" ロール ="アラート" ng init ="doShowExpandedErrorDetails = true" ng ショー"retrieveLastConfigurationError =()">' +
' が I/O エラーまたはその他のエラーがありました. 構成データ ファイルができませんでしたので、これは通常発生 ' +
' 発見または構成ファイルには不正確な情報が含まれています (ドキュメント ライブラリを参照するなど ' +
' が存在しません).' +
' <br/>' +
' <div ng 表示 ="doShowExpandedErrorDetails">' +
' <href ="#" ng クリック ="doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
' ここをクリック詳細を非表示にします。 +
' </は>: ' +
' <br/>' +
' <プレ>{{retrieveLastConfigurationError() | json}}</プレ>' +
' <br/>' +
' </div>' +
' <div ng 表示 ="!doShowExpandedErrorDetails">' +
' <href ="#" ng クリック ="doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
' ここをクリックしてエラーの詳細を展開します。 +
' </は>' +
' </div>' +
'</div>'
};
});

基本的には, "GeneralCdlErrorHandler"と呼ばれる新しい要素を作成しています。  RetrieveLastConfigurationError と呼ばれる機能にアクセスする必要があるし、されているスコープ オブジェクトで処理します。  私はおそらく可能性があります使用しているだけ親のスコープ, しかし、怠惰な感じています。  もし誰もそれを行っている必要がありますと考えています。, コメント欄でそれについて聞いてみたい.

これはすべての罰金だった, しかし、何かを得ていなかった。  コンソールでポップアップ エラーなし (少なくとも 1 回私は道に沿って作成すべての sx エラーを修正).  私は単に、ディレクティブから任意の出力を取得できませんでした。  行ったし、ng ショー ディレクティブと私は前にいくつかの静的テキストを追加 * でした * を取得. これは、そこにおそらくディレクティブとではなかった暗黙的に"doShowExpandedErrorDetails"のような新しい変数を作成することも、"ng init"を許可されていると思う私。 

HTML があったら、タイプおよびこのタイム WebStorm 私を助けて参照してくださいに戻って入った。  このような retrieveLastConfigurationError 関数に過ぎて行った:

<一般的な cdl のエラーハンドラー retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</一般的な cdl エラー ハンドラー>

しかし、それは本当にこのことを必要と:

<一般的な cdl のエラーハンドラー取得の最後の構成-エラー"CDLController.retrieveLastConfigurationError =()">
</一般的な cdl エラー ハンドラー>

WebStorm は、ハイフンが持っていたことを知っているには十分にスマートだった。  場合は、そのヒントを提供していませんでした。, 私はおそらくあるまだこの問題のトラブルシューティング スマイル.  楽しい時間!

トリックはこれです。: ディレクティブ要素名前はハイフンでだけでなく, 任意の属性を追加するは。  ハイフンを追加, それはすべてうまく働きました。  単一の短い名前を使用するが起こったダンのチュートリアル, 接続を確認していないので.

これは誰かを役に立てば幸い.

</終了>

undefined私のブログを購読します。.

私は Twitter の上に従ってください。 http://www.twitter.com/pagalvin

IE9 本当に好きではないそれのショートカットを取るとき、 <スパン> タグ

すべての時間のクロムを使用しての悪い習慣に落ちたんです。  開発するものは、本当に多くの他の web ブラウザー上で実行する必要があるために、それは「悪い」, 含む, 悲しいことに IE8。  私の仕事のラップトップは IE9 標準何らかの理由で) クイックをやっていたと確認するどのようなものに見えたようなと... それはかなりでした。  たとえば:

image

それは * 仮定 * これのように見える:

image

 

だけでなく、オフだった, しかし、私のクリック イベントを発射されていません。  (殆んど, とにかく).

視覚的に, 物事は脱線する「先端セットアップ」リンクの近くに始めたように見えた。  HTML の部分に掘られてし、この行を持っていたことを発見:

<範囲のクラス =「glyphicon glyphicon-新しい-ウィンドウ」/>

許容構文のように思える ("クロムのバージョン 40.02214.94 m"それで結構です。). 行ったし、とにかく変更, 示すように:

<範囲のクラス =「glyphicon glyphicon-新しい-ウィンドウ」></スパン>

それを修正します。.

このような小さなもので、画面のような巨大な混乱を引き起こされます。  楽しい時間.

これは迅速な修正プログラムに起こった, しかしそれは一種のそれを見るときにちょうどにずれてあなたの背骨になる事も。  そこに 500 この小さな管理関数で HTML の行をたくない掘るそれらの雑草の中で自分自身を見つける, これまで スマイル.

</終了>

undefined私のブログを購読します。.

私は Twitter の上に従ってください。 http://www.twitter.com/pagalvin