2017-07-07 24 views
1

定義されていません。にReferenceErrorが:Excelは、私はオフィスアドインをangularjsとangularjs-UI-ルータで作りたい

<bt:Urls> 
    <bt:Url id="Contoso.Taskpane3.Url" DefaultValue="https://localhost:3000/addin/test" />    
</bt:Urls> 

モジュールの名前がappで、次のようにルータがある:

私は、アドインをロードするを書き込む期待

app.controller('TestCtrl', [function() { 
    function loadDataAndCreateChart() { 
     Excel.run(function (ctx) { 
      var sheet = ctx.workbook.worksheets.getActiveWorksheet(); 
      sheet.getRange("A1").values = "Quarterly Sales Report"; 
      return ctx.sync() 
     }) 
    } 
    loadDataAndCreateChart() 
}]) 

.state('addinTest', { 
    url: '/addin/test', 
    tempalte: 'abc', 
    controller: 'TestCtrl', 
    resolve: { 
     loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) { 
      return $ocLazyLoad.load('https://appsforoffice.microsoft.com/lib/1/hosted/office.js'); 
     }], 
     initOffice: ['loadMyCtrl', function (loadMyCtrl) { 
      Office.initialize = function (reason) { 
       $(document).ready(function() { 
        angular.element(document).ready(function() { 
         angular.bootstrap(document, ['app']) 
        }) 
       }); 
      } 
      return Promise.resolve(null) 
     }] 
    } 
}) 

とコントローラ〜A1。しかし、次のエラーが発生しました:

ReferenceError: Excel is not defined at loadDataAndCreateChart 

何が問題なのですか? Officeを初期化してangular.bootstrapを使用しても問題ありませんか?

答えて

0

あなたは、Officeの初期化が行われた後

Excel.run(function (ctx) { 
     var sheet = ctx.workbook.worksheets.getActiveWorksheet(); 
     sheet.getRange("A1").values = "Quarterly Sales Report"; 
     return ctx.sync() 
    }); 

が実行されるように呼び出すことを確認する必要があります。

上記のコードを実行する小さなアプリケーションを作成しました。実際にこれを実行するには3つのファイルしかありません。

  • index.htmlを
  • app.js
    1. manifest.xmlには、次で置き換えることを確認してくださいあなたの実際のローカルパスで単語PathToYourLocalFileをファイル。

      のmanifest.xml

      <?xml version="1.0" encoding="utf-8"?> 
      <OfficeApp xsi:type="TaskPaneApp" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"> 
          <Id>6ed5a5d8-57e4-4739-9a38-cff59f23e266</Id> 
          <Version>1.0.0.0</Version> 
          <ProviderName>Test Provider</ProviderName> 
          <DefaultLocale>en-US</DefaultLocale> 
          <DisplayName DefaultValue="Test" /> 
          <Description DefaultValue="Angular Test" /> 
          <Capabilities> 
           <Capability Name="Workbook" /> 
          </Capabilities> 
          <DefaultSettings> 
           <SourceLocation DefaultValue="PathToYourLocalFile/index.html" /> 
          </DefaultSettings> 
          <Permissions>ReadWriteDocument</Permissions> 
      </OfficeApp> 
      

      index.htmlを

      <!DOCTYPE html> 
      <html lang="en" ng-app="AngularTest" ng-controller="MainController"> 
      <head> 
          <meta charset="utf-8"> 
          <title>Angular Test</title> 
          <meta name="viewport" content="width=device-width, initial-scale=1"> 
          <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script> 
      </head> 
      <body> 
          <div ng-view></div> 
          <!-- Load Js Libaries --> 
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
          </script> 
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> 
          </script> 
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.min.js"></script> 
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script> 
      
          <script src="PathToYourLocalFile/app.js"></script> 
          </body> 
          </html> 
      

      app.jsあなたはで見ることができます

      'use strict'; 
      angular.module('AngularTest', []) 
          .controller('MainController', [ 
           function() { 
            Office.initialize = function() { 
             $(document).ready(function() { 
              loadDataAndCreateChart(); 
             }); 
            }; 
      
            function loadDataAndCreateChart() { 
             Excel.run(function (ctx) { 
              var sheet = ctx.workbook.worksheets.getActiveWorksheet(); 
              sheet.getRange("A1").values = "Quarterly Sales Report"; 
              return ctx.sync(); 
             }); 
            } 
      
           } 
          ]); 
      

      app.jsファイルで、Officeの初期化後にloadDataAndCreateChartメソッドが実行されます。

      ここであなたが優れてマニフェストを追加することができますどのようにドキュメントを見つけることができます:私はあなたのソリューションをテストしていない Office Dev Center

    +0

    ...私はangular.bootstrap '後に' 'Promise.resolve(null)を返します入れて考えます(document、['app']) 'を私のコードで実行し、' TestCtrl'に 'initOffice'を注入すると問題が解決します... – SoftTimur

    関連する問題