Use office-ui-fabric-js inside angularjs
I made a jsbin with office-ui-fabric-js .
Now I would like to add an angular controller. So I tried this 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>
However, it gives an error Failed to instantiate module YourApp
. Does anyone know how to fix this?
In theory, can we use office-ui-fabric
it office-ui-fabric-js
internally angular
, or do we need to use ng-office-ui-fabric
?
source to share
ng-office-ui-fabric
is a module for Angular.js that wraps around office-ui-fabric
. It's meant to provide you with AngularJs directives that can make it easier to use office-ui-fabric
.
In your code, you still include the dependencies for this module, even if you don't load it. Removing these dependencies when loading the application i.e. angular.module('YourApp', [])
, will fix your application and allow it to load properly.
Using a library office-ui-fabric
in this way can be problematic because anytime you use JavaScript functions outside of AngularJs you have to manually loop through $digest
AngularJs to see if the values on the page have changed. This may or may not be a problem with the library office-ui-fabric
.
source to share