Используйте office-ui-fabric-js внутри angularjs

Я создал jsbin с office-ui-fabric-js.

Теперь я хотел бы добавить угловой контроллер. Поэтому я попробовал этот 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-fabric и office-ui-fabric-js внутри angular, или мы должны использовать ng-office-ui-fabric?


javascript angularjs office-ui-fabric ms-office office-js
person SoftTimur    schedule 18.07.2017    source источник
comment
Это немного сбивает с толку то, что вы пытаетесь сделать здесь. Вы кажется пытаетесь внедрить модули angularjs 'officeuifabric.core' и 'officeuifabric.components' в YourApp, но это не похоже на модули angular.   -  person Claies    schedule 26.07.2017
comment
Короткий ответ: да, вам нужно будет либо использовать ng-office-ui-fabric, либо написать свою собственную реализацию, которая сделает эти библиотеки совместимыми с angular.   -  person Claies    schedule 26.07.2017
comment
officeuifabric.core и officeuifabric.components — угловые модули. Я вводил их вот так, например, здесь.   -  person SoftTimur    schedule 26.07.2017
comment
верно, но эти определенно ng-office-ui-fabric модули. Они не являются частью неуглового скрипта, который вы пытаетесь внедрить в этом примере. Ваш вопрос, кажется, спрашивает, как не использовать библиотеку, которая была разработана для выполнения именно той задачи, которую вы пытаетесь выполнить, и вы продолжаете пытаться внедрить библиотеку, даже если вы ее не включаете .   -  person Claies    schedule 26.07.2017
comment
Хорошо... но есть ли способ включить часть <div ng-controller="YourController">...</div> в коде с angularjs?   -  person SoftTimur    schedule 26.07.2017
comment
Я спрашиваю об этом, потому что иногда у меня возникают проблемы с использованием ng-office-ui-fabric, например здесь.   -  person SoftTimur    schedule 26.07.2017
comment
что включает часть <div ng-controller="YourController">...</div> в коде с angularjs? даже значит? Теоретически, если вы только что удалили зависимости от ng-office-ui-fabric (то есть angular.module('YourApp', [])), ваше приложение больше не будет выдавать ошибок. Что касается использования office-ui-fabric, вы, безусловно, можете попробовать использовать его без поддержки angular, но это, вероятно, будет ошибкой, поскольку он не сможет сообщить angular, когда обновлять привязки.   -  person Claies    schedule 26.07.2017
comment
Понятно... Я просто понимаю, что мы можем делать привязки (т.е. {{...}}), ng-click и ng-show с office-ui-fabric и angularjs, например здесь.... Тогда, в этом случае, какова добавленная стоимость ng-office-ui-fabric?   -  person SoftTimur    schedule 26.07.2017
comment
мне кажется, что это просто реализация, помогающая управлять взаимодействием между двумя библиотеками. У меня нет большого опыта работы с библиотекой, чтобы знать, что она добавляет или удаляет, но я немного исследовал ваш другой вопрос. мне кажется, что то, что вы видите в этом вопросе, может быть ошибкой, о которой нужно сообщить, но я все еще работаю над ней.   -  person Claies    schedule 26.07.2017
comment
Круто, хочешь поставить ответ на этот вопрос? если вы только что удалили зависимости от ng-office-ui-fabric (то есть angular.module('YourApp', [])), ваше приложение больше не будет выдавать ошибки.   -  person SoftTimur    schedule 26.07.2017

Ответы (1)


arrow_upward
2
arrow_downward

ng-office-ui-fabric — это модуль для Angular.js, являющийся оболочкой office-ui-fabric. Он разработан, чтобы дать вам директивы AngularJs, которые могут упростить использование office-ui-fabric.

В свой код вы по-прежнему включаете зависимости для этого модуля, хотя на самом деле вы его не загружаете. Удаление этих зависимостей при загрузке вашего приложения, т. е. angular.module('YourApp', []), исправит ваше приложение и позволит ему правильно загружаться.

Использование библиотеки office-ui-fabric таким образом может быть сложным, потому что каждый раз, когда вы используете функции JavaScript вне AngularJs, вам нужно вручную выполнить цикл $digest, чтобы AngularJs знал, что значения на странице изменились. Это может быть или не быть проблемой с библиотекой office-ui-fabric.

person Claies    schedule 25.07.2017
comment
Есть ли стандартный способ использования office-ui-fabric функций JavaScript с AngularJS? Будет ли лучше перемещать все эти JS-функции внутрь контроллера? - person SoftTimur; 26.07.2017
comment
создание директивы для неуглового кода является стандартом, поэтому ng-office-ui-fabric представляет собой серию директив. - person Claies; 26.07.2017