Tag Archives: ngModel

Sharepoint People Picker – AngularJs Directive [Updated]

I’ve recently updated the code for my angularJs directive that I wrote a year ago.

I won’t go into detail like the previous post, this is more of a change log.
The updated code is on Github (https://github.com/drohreo/spPeoplePicker-ng-directive), a few words first on what I’m planning.
At the moment the code on Github is within a demo project, a visual studio solution of a SharePoint hosted add-in.
It would make more sense to have just the relevant code there, so that’s something I’m planning to do.
But I want to make it more easy to grab, both for myself and others, so I’m hoping to make it into a bower package.
I’m also planning to give the same treatment to a taxonomy picker, and probably some other good SharePoint utilities for angular, like some standard services for common tasks and what not.

Now for the changes.
The whole directive has been given a bit of an overhaul, basically I’ve streamlined it. I’ve decided that the model needs only be an array the key and the display name. Deciding on one model rather than a configuration that gives you different outputs makes it harder to reason about how to implement the flow within the directive.
It has a drawback, that was actually there in the previous incarnation, but I did not realize it. Which is that when you place anything other than a primitive type object on the model, the built-in change detection of the $compile service does not do a deep check of properties, so I had to implement a watch to facilitate a two-way binding mechanism of the control and model.
Previously this did not work, now if you want a different model, reading my previous post, should give you enough information to make the changes needed.

Also I’ve removed the extra html for the twitter bootstrap styles and the label, allowing the directive to be purely what it is, without forcing any styling conventions, If you want twitter bootstrap styles you can place the directive within the needed html and classes yourself.

I’ve also built a service for the directive which is very simple, and probably needs some more work. What it does is use the SharePoint script on demand services, to ask for the js files from SharePoint, so that you don’t need to place the script tags on your page, it also insures that we don’t load files twice.
I noticed that If you used a aspx page in your app, with the app.master file being used, in a SharePoint online environment, many of the files were being loaded from SharePoint online CDN’s and loading them again could cause conflicts and problems. Not to mention the waste of bandwidth.

The service exposes a promise object which the directive calls the then function and initializes the people picker first after all the scripts are loaded.
Lastly I’ve placed both the service and the directive in their own module, which can then be added as a dependency of your app.

So to use it, get the files here (until I make a bower package)

add “spUtils” as a dependency of your app in your module declaration like this.
angular.module(“yourAppName”, [“spUtils”, “otherDeps..”])

and place this tag in your html

And you should be good to go, and if something doesn’t work, write an issue on github.