在 angularjs 中使用 office-ui-fabric-js

Question

现在我想添加一个 angular 控制器。所以我尝试了这个 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。有谁知道如何解决这个问题？

理论上我们可以在angular中使用office-ui-fabric和office-ui-fabric-js，还是必须使用ng-office-ui-fabric？

Answer 1

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

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

以这种方式使用 office-ui-fabric 库可能具有挑战性，因为任何时候你在 AngularJs 之外使用 JavaScript 函数时，你都有为 AngularJs 手动执行 $digest 循环，以了解页面上的值已更改。可能是也可能不是 office-ui-fabric 库的问题。

在 angularjs 中使用 office-ui-fabric-js

Use office-ui-fabric-js inside angularjs

javascript

ms-office

angularjs

office-js

office-ui-fabric