2017-07-07 47 views
1

我想打一個Office加載與angularjs和angularjs-UI-路由器:的ReferenceError:Excel中沒有定義

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

模塊的名稱是app,和路由器如下:

.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) 
     }] 
    } 
}) 

而且控制器:

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() 
}]) 

我希望在加載外接寫道:Quarterly Sales ReportA1。但是,我得到以下錯誤:

ReferenceError: Excel is not defined at loadDataAndCreateChart 

有人知道什麼是錯?初始化Office並使用angular.bootstrap可以嗎?

回答

0

您需要確保調用像

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

辦公室的初始化完成之後執行。

我創建了一個小應用程序,可以從上面運行您的代碼。實際上運行這個只有三個文件。

  1. 的manifest.xml
  2. 的index.html
  3. app.js

請確保您在下面的替換文件的話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

我沒有測試您的解決方案......我覺得把'返回Promise.resolve(空)'angular.bootstrap後' (文檔,['app'])'在我的代碼中,並注入'initoffice'到'TestCtrl'也將解決這個問題... – SoftTimur