2017-07-07 4 views
1

Je veux faire un complément Office avec AngularJS et AngularJS-ui-routeur:ReferenceError: Excel n'est pas défini

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

Le nom du module est app, et le routeur est la suivante:

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

Et le contrôleur:

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

Je suppose que le chargement du complément écrit Quarterly Sales Report à A1. Cependant, j'ai l'erreur suivante:

ReferenceError: Excel is not defined at loadDataAndCreateChart 

Est-ce que quelqu'un sait ce qui ne va pas? Est-il correct d'initialiser Office et d'utiliser angular.bootstrap comme ça?

Répondre

0

Vous devez vous assurer que les appels comme

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

sont exécutées après l'initialisation du bureau se fait.

J'ai créé une petite application qui exécute votre code ci-dessus. En fait, pour exécuter cela, il n'y a que trois fichiers.

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

Assurez-vous que vous remplacez dans les fichiers suivants le mot PathToYourLocalFile avec votre chemin local réel.

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

     } 
    ]); 

Vous pouvez voir dans le Le fichier app.js indique que la méthode loadDataAndCreateChart est exécutée après l'initialisation d'Office.

Ici vous trouverez la documentation comment vous pouvez ajouter le manifeste d'exceller: Office Dev Center

+0

Je ne l'ai pas testé votre solution ... Je pense mettre 'retourner Promise.resolve (null)' 'après angular.bootstrap (document, ['app']) 'dans mon code, et injecter' initOffice' à 'TestCtrl' résoudra le problème aussi ... – SoftTimur