Javascript 在angularjs中使用office ui fabric js_Javascript_Angularjs_Ms Office_Office Js_Office Ui Fabric

Javascript 在angularjs中使用office ui fabric js

javascript angularjs ms-office office-js

Javascript 在angularjs中使用office ui fabric js,javascript,angularjs,ms-office,office-js,office-ui-fabric,Javascript,Angularjs,Ms Office,Office Js,Office Ui Fabric,我已经和你谈过了现在我想在周围添加一个角度控制器。所以我试了一下：命令 {{{哈哈}} var CommandBarElements=document.queryselectoral（“.ms CommandBar”）； for（var i=0；i

我已经和你谈过了

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


命令
{{{哈哈}}
var CommandBarElements=document.queryselectoral（“.ms CommandBar”）；
for（var i=0；i


但是，实例化模块YourApp时出现错误。有人知道如何解决这个问题吗
理论上，我们可以在angular
内部使用office ui fabric
和office ui fabric js
，还是必须使用ng office ui fabric
？
ng office ui fabric
是angular.js的一个模块，angular.js是office ui fabric
的包装器。它旨在为您提供AngularJs指令，使使用OfficeUI结构
变得更容易
在代码中，您仍然包含此模块的依赖项，即使您没有实际加载它。删除应用程序加载中的这些依赖项，即angular.module（'YourApp'，[]）
将修复应用程序并允许其正确加载
以这种方式使用office ui fabric
库可能具有挑战性，因为任何时候在AngularJs之外使用JavaScript函数时，都必须手动执行$digest
循环，让AngularJs知道页面上的值已更改。这可能是office ui结构的问题，也可能不是。
库中的问题。
您试图在这里执行的操作有点混乱。您似乎试图将angularjs模块'officeuifabric.core'
和'officeuifabric.components'
注入到您的应用程序中，但看起来这些不是角度模块。简单的回答是肯定的，您需要使用ng office ui fabric
，或者编写自己的实现，使这些库具有角度兼容性。officeuifabric.core
和officeuifabric.components
是角度模块。我一直在这样注入它们，例如，.对，但它们肯定是ngofficeui结构
模块。它们不是您在本示例中尝试注入的非角度脚本的一部分。您的问题似乎是问如何不使用设计用于完成您正试图完成的事情的库，并且您正在继续尝试并注入库，即使您没有包括它。“启用…
部分代码中包含angularjs”是什么意思？理论上，如果您刚刚删除了对ng office ui fabric
（即angular.module（'YourApp'，[]）
）的依赖项，您的应用程序将不再抛出错误。至于使用office ui fabric
，您当然可以尝试在没有AngularJS支持的情况下使用它，但它可能有问题，因为它无法告诉angular何时更新绑定。是否有标准方法将office ui fabric
JavaScript函数与AngularJS一起使用？在控制器中移动所有这些JS函数会更好吗？为非角度代码创建一个指令是标准的，这就是为什么ng office ui fabric是一系列指令的原因。
<!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>