カテゴリーアーカイブ: 角度

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

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

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

シンプルなもの。正確な同じ潜在的なエラーはエンドユーザー画面だけでなく、管理画面に表示できるので, それは明らかにカスタム角度指令と呼ばれます。私はこれを発見しました。優れたシリーズ記事 (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 は、ハイフンが持っていたことを知っているには十分にスマートだった。場合は、そのヒントを提供していませんでした。, 私はおそらくあるまだこの問題のトラブルシューティングスマイル . 楽しい時間!

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

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

</終了>

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

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

HTTP 406 SharePoint の残りの部分の端点に対する角度の $http.get を使用するときのエラー

2 回答

更新プログラム: 情報のこの素晴らしい作品を指摘したマルク広告 ndersson: http://blogs.office.com/2014/08/13/json-light-support-rest-sharepoint-api-released/. たくさん説明します。 :).

それが今まで、最悪、ブログの記事のタイトルがあります。! Anyhoo.

通常 O365 インスタンスに対して私のプロトタイピングの全力します。. 私は他の誰に影響を与える心配する必要はありませんので、私の個人的なインスタンスがある私. 余談として-覚えている我々がモス – で私たちのラップトップ上の仮想マシンの周り実施呼び出し SQL Server, IIS, ハイパー V 対を決定します。. VMWare? Anyhoo.

角はこの環境を使用してアプリを開発していた, 他のものの間で, この:

$http.get(serverUrl)
.成功(関数(データ, ステータス, ヘッダー, 設定) {

var getLinksResponse = データ;

getLinksResponse.value.forEach(関数(その結果) {

// およびそう泡

これは 2 つの異なる SharePoint オンライン環境でうまく働いていた. ただし, とき私の同僚は Cloudshare インスタンスにそれを移植, 彼が得ていた、 HTTP 406 エラー (私はこれまで 1 つを得たの初めてだった, ... イェーイ, 思います). 我々は研究のビットを行なったし、「受け入れる」ヘッダーがオフだったことに気づきました. SharePoint のオンラインは完全に満足していた:

受け入れる: アプリケーション/json

Cloudshare のインスタンスが (プレム上 SP であります。, 仮想サーバーでホストされています。) 古典的なしたかった"odata verbose ="同様の追加:

受け入れる: アプリケーション/json;odata = 詳細

それを修正するには, 我々はそのヘッダーを追加:

var 構成 = {ヘッダー: {
' 受け入れる ': ' アプリケーション/json;odata verbose ='
}
};

$http.get(serverUrl,設定)
.成功(関数(データ, ステータス, ヘッダー, 設定) {

var getLinksResponse = データ;

getLinksResponse.value.forEach(関数(その結果) {

// およびそう泡

処分したこと、 406, しかし、それはまた、応答の形式を変更. 詳細は... 詳細. (ハハ!) 多くの変更が必要であり、ここで最終結果:

var 構成 = {ヘッダー: {
' 受け入れる ': ' アプリケーション/json;odata verbose ='
}
};

$http.get(serverUrl,設定)
.成功(関数(データ, ステータス, ヘッダー, 設定) {

var getLinksResponse = データ;

getLinksResponse.d.results.forEach(関数(その結果) {

// およびそう泡

これだけになって、 30 私たちの分の問題, だから私たちは尽きてください。. うまくいけば、誰かがこの役に立つ見つける.

</終了>

使い方: 同じページ上の複数の角度の SharePoint Web パーツを有効にします。

5 回答

このブログの記事を複数を持つことができますどのように説明します Angular.js 基づく SharePoint web パーツ (コンテンツエディター web パーツを介して参照されます。) 同じページに. コンテンツエディター web パーツを呼んでいます。 (CEWP) Angular.js フレームワーク、角度 Web パーツ」.「を使用して構築された java スクリプトの設定を参照する

角のブートストラッププロセスは超簡単で、ちょうど約あらゆる例がインターネットで見つけるようになります。:

<html ng アプリケーション 'myApp' =>

<何とか/><何とか/><何とか/>

</html>

これは、ブレークダウン, ただし, 同じページ上の複数の角度の web パーツを表す複数の CEWP を有効にする場合. 角はのみ自動的にブートストラップ最初 ng アプリディレクティブに対してそれがあると認める – 少なくとも角バージョン 1.3.6. ソリューションは、かなりシンプルな – 手動で代わりに、コードをブートストラップ. 上記は今このような何かを変更します。:

<体>
<div id =”bootstrapHere” ng コントローラー =”コントローラーとして myController”>
<何とか/><何とか/><何とか/>
</div>
</体>

<スクリプトを src =”//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js”></スクリプト>

<スクリプト>
angular.bootstrap(angular.element(document.getElementById(“bootstrapHere”)),[' myApp']);
</スクリプト>

基本的には, ng アプリ要素で行うを使用して、ブートストラップではなく, その要素に ID を平手打ち. [, ブートストラップを使用します。() 角度の方法自体はブートストラップを制御する実行時処理します。. 同じページ上の 3 つの異なる角度の web パーツでこれをテストしてみたし、魅力の作品.

</終了>

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

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