3

我用office-ui-fabric-js制作了一个jsbin。

现在我想在周围添加一个角度控制器。所以我尝试了这个JSBin：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css">
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css">
  <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
</head>
<body ng-app="YourApp">
  <div ng-controller="YourController">
    <div class="ms-CommandBar">
      <div class="ms-CommandBar-mainArea">
        <div class="ms-CommandButton">
          <button class="ms-CommandButton-button">
            <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>
          </button>
        </div>
      </div>
    </div>
    {{haha}}
  </div>

  <script type="text/javascript">     
    var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
    for (var i = 0; i < CommandBarElements.length; i++) {
        new fabric['CommandBar'](CommandBarElements[i]);
    }
    angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
    .controller('YourController', ['$scope', function ($scope) {
      $scope.haha = true
    }])
  </script> 

</body>
</html>

但是，它给出了一个错误Failed to instantiate module YourApp。有谁知道如何解决这一问题？

理论上我们可以使用office-ui-fabricand office-ui-fabric-jsinside angular，还是必须使用ng-office-ui-fabric？

4

1 回答 1

2

ng-office-ui-fabric是 Angular.js 的一个模块，它是office-ui-fabric. 它旨在为您提供可能使使用office-ui-fabric更容易的 AngularJs 指令。

在您的代码中，您仍然包含此模块的依赖项，即使您实际上并未加载它。在您的应用程序加载中删除这些依赖项，angular.module('YourApp', [])即将修复您的应用程序并允许它正确加载。

以这种方式使用该office-ui-fabric库可能具有挑战性，因为任何时候您在 AngularJs 之外使用 JavaScript 函数时，您都必须手动执行一个$digest循环，以便 AngularJs 知道页面上的值已更改。这可能是图书馆的问题，也可能不是。office-ui-fabric

于 2017-07-25T23:23:41.033 回答