12

シングルページアプリをローカルで開発しています。

Angularjs で単純なカスタム ディレクティブを使用して HTML ファイルをテンプレートとして読み込めないようです。属性を使用して生の html を使用しようとするとtemplate:、問題なく動作しますが、このテンプレートで使用する必要があるコードは 400 行以上あり、templateUrl:何も使用しないとすぐに読み込まれます。HTMLファイルをC：/ my-customer.htmlなどのさまざまな場所にコピーするなど、30の可能なパスを試してみました。これが私のプロジェクト構造です。

    App--
        |
        css
        |
        img
        |
        js--
           |
           main.js
           |
           foundation.js
           |
           my-customer.html
        |
        templates--
                  |
                  my-customer.html
        |
        bcf.html
        |
        fluidType.html
        |
        start.html
        |
        my-customer.html

簡単にするために、Angular ドキュメントの例を使用しています。ここでは、ディレクティブのコードを示します (コントローラーを含む main.js 内)。

app.directive('myCustomer', function() {
  return {
    templateUrl: 'my-customer.html'
  };
});

などのパスをもう一度試し../my-customer.html ../templates/my-customer.htmlましたが、何も機能していませんtemplateUrl:。これが役立つ場合は、ローカル Web サーバーが実行されていない Windows を使用しています。

ここにいくつかのコンソールエラーがありますが、初心者としてその意味がわからないので、Webサーバーを実行してhttpを解析する必要があると感じています。

 XMLHttpRequest cannot load file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html'.
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:87:261
    at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:83:133)
    at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:80:366)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
    at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
    at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)angular.js:11594 (anonymous function)
angular.js:11594 Error: [$compile:tpload] http://errors.angularjs.org/1.3.8/$compile/tpload?p0=templates%2Fmy-customer.html
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:137:65
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
    at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
    at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:369)

Angularjs は初めてです。私はプロジェクトで壁にぶつかり、今は完全に立ち往生しています。

4

1 に答える 1

14

それはすでにルートに関連しているはずです。したがって、これは機能するはずです：

app.directive('myCustomer', function() {
  return {
    templateUrl: '/templates/my-customer.html'
  };
});

それでもうまくいかない場合は、まずテンプレート ディレクトリを参照できることを確認します。

http://localhost/templates/my-customer.html

テンプレートを直接取得できるはずです。テンプレートが見つかったら、ホストとポートを削除するだけです。

于 2014-12-30T17:48:56.937 に答える