It has already become a series of posts in my blog about the combination of AngularJS and SharePoint:
And it will be more. Some of them are a pure angular stuff, some of them are really for SharePoint.
In this post post I’ll show how to create a directive for a sharepoint modal dialog (SP.UI.ModalDialog). There is already a modal dialog implementation in the Angular UI project, but it uses the bootstrap modal dialog. But it custom attributes for angular”>is not that hard to create an own directive for showing sharepoint modal dialogs. I’ve called the new directive ng-sp-modal (ngSpModal). Here is this:
var ngSpModal = function() {
link: function (scope, element, attrs, controller) {
var dialog,
defaults = { html: element.get(0), showClose: false },
getOptions = function () {
var options = scope.$eval(attrs.ngSpModal);
return angular.extend(defaults, options);
};
fireSpModal: function (value) {
if (value) {
var opts = getOptions();
dialog = SP.UI.ModalDialog.showModalDialog(opts);
} else {
dialog && dialog.close();
}
};
// Watch for changes to the directives options
scope.$watch(attrs.ngShow, fireSpModal, true);
}
return {
require: '?ngShow',
link: link
};
};
window.myApp = angular.module('myApp', ['ui.directives']);
myApp.directive('ngSpModal', [ngSpModal]);
The new ng-sp-modal directive depends on ng-show. When your expression or value for ng-show for your html area is true, then a sharepoint modal dialog will open. This is achieved through a $watch command. The html area which is used to create will be copied to the modal dialog. I have used it for forms. To use it, just place this directive into your html element that you want be shown in a modal dialog. Here is a simple example to achieve what it is shown in the screenshot pasted above.
<div ng-sp-modal="modalOptions" ng-show="formShown">
Here is the html markup for your modal dialog
<input type="button" ng-click="formShown = false" value="Close modal">
</div>
<input type="button" ng-click="formShown= true" value="Open modal">
Here is the very simple angular controller to let it work:
function someCtrl($scope) {
$scope.modalOptions = {
height: 100,
width: 300,
title: "Yeah"
};
}
Like this:
Like Loading...
Hi Anatoly.
I also work with SharePoint and Angular.
There is a different way to detect the edit-mode – you can use the app-tokens. But i have a problem.
If you would use this url in your app (with the hash prefix : #)
~appWebUrl/Content/index.html#?{StandardTokens}
then the StandardTokens would not get added to the page call.
it would simply be ~appWebUrl/Content/index.htm – and i do not know why.
If you would make the call without the # – the app-tokens are added.
Do you have any solution for this problem?
I would love to exchange some expieriences.
Here you can find all the Token you will get, when an app-part is called:
http://blog.sharepointalist.com/2013/02/sharepoint-2013-app-part-tokens.html
There is also a “editMode” param i need to use in my angular app.
When there is no workaround for the # issue, i think it would make sense to read the string manually.
var params = document.URL.split(“?”)[1].split(“&”);
and then call he angular url with the params … i will try this
It worked! … i made a start.html with one line of JS-code in the hader:
self.location = ‘index.html#/?’ + document.URL.split(‘?’)[1];
As you can see, i called my index.html and angular gets all SP params ;D yeah!