Richards blog

I came across this great directive  here  to create headers based on sections in an ng-repeat. The cides works like a charm. Here is a copy. // html <div ng-repeat="item in data.items | orderBy:... | filter:... as filteredItems" header-list objects="filteredItems" header="getHeader">     <div ng-show="item.$header">{{item.$header}}</div>     <div>Your normal content</div>  </div> // controller function $scope.getHeader = function(item) {   return item.name.slice(0, 1); } // directive app.module("...").directive('headerList', function () {   return {     restrict: 'A',     scope: {       objects: '=',       header: '=' // This must be a function or instance method     },     link: function(scope) {       scope.$watch('objects', function() {         var lastHeader, currentHeader; ...

A recent penetration test of some API code showed that user information (such as an email address) was being displayed in the querystring. The API was: [HttpPost] [Route("api/MyAPIEndPoint")] public void DoSomething(string login, string email) { // stuff } A simple view of the endpoint with a browser would display the users details. The network tab in Chrome showed "api/MyAPIEndPoint?login=X12345&email=test@test.com". A new approach was required. The solution is to include the data in the body of the Request. The factory event is updated as follows: function DoSomething(login, email, success, failure) { var url = "/api/MyAPIEndPoint"; var parameter = { "Login": login,                 "Email": email }; return executePost(url, parameter, success, failure); } function executePost(url, parameters, success, failure) { var req = { method: 'POST', url: url, data: parameters }; $htt...

There are a couple of ways to redirect to a new location: window.location.href / $window.location.href However, when using routing ($routeProvider), $location is the way to go. To navigate to another route: $location.path("/Search"); $location.replace(); To navigate to another route using query strings (such as ?k=test) $location.path("/Search").search('k', 'test'); To extract the query values, use  $location.search().k;

I was looking for a cascading list solution and I found one  here  that almost gave me what I needed. I added a few tweaks to get my desired result. UPDATE: Be very careful with the items that are used in the filter. The filter is a string based comparison, so performing a filter on 'ID=1' will also return items for ID=10,ID=11 etc. My solution was to create two new properties: filterId and filterParentId. These are set to '<placeholder>ID<placeholder>'. For example, ###1###. You can then filter So, instead of searching for 1, you could search for ##1##, which would remove the unwanted results. My code is as follows: html:             <select class="form-control"                     ng-model="selectedParentItem"                     ng-change="parentchanged()"                  ...

I was recently faced with the problem that my solution required HTML to be rendered. Not a problem - bind it with ng-bind-html and all is good. Or is it? This solution falls on its head when we have embedded 'syle' in the HTML. <div class="ExternalClass2F49307A49BF4FE3B48CB68350A1A9C6"><span style="color:rgb(0, 128, 0)">--My Sample Text in the RichText  Editor in SP2010--</span><div><br /></div> <div><br /></div></div> The solution is to used $sce ( Strict Contextual Escaping ) to format the output. Controller: $scope.trustAsHtml = function(string) {     return $sce.trustAsHtml(string); }; DOM/HTML: <div data-ng-bind-html="trustAsHtml(myHtmlString)"></div>

I was populating an html table and needed to apply the css class 'even' to every second line. The solution was pretty simple using some angular goodness. My html for the tr was as follows: <tr ng-repeat="data in MyDataCollection" ng-class="IsEven($index) ? 'even' : '' "> <td>{{data.Col1}}</td> <td>{{data.Col2}</td> </tr> The variable $index gives you the current index (row) for the collection. You can pass it to a (simple) function to return whether the row is even or not. My function looked as follows: $scope.IsEven = function(index){ return (index % 2 != 0); };

Normally, the easiest way to disable a control is using ng-disable, but this little beauty does not work with anchor tags. The easiest way is to created a directive to handle the action (see here  for the original code): app.directive('aDisabled', function() {     return {         compile: function(tElement, tAttrs, transclude) {             //Disable ngClick             tAttrs["ngClick"] = "!("+tAttrs["aDisabled"]+") && ("+tAttrs["ngClick"]+")";             //return a link function             return function (scope, iElement, iAttrs) {                 //Toggle "disabled" to class when aDisabled becomes true                 scope.$watch(iAttrs["aDisabled"], function(newValue) {                ...

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { $scope.UserGroups = []; var clientContext = new SP.ClientContext.get_current(); this.collGroup = clientContext.get_web().get_siteGroups(); currentUser = clientContext.get_web().get_currentUser(); clientContext.load(collGroup); clientContext.load(collGroup, 'Include(Users)'); clientContext.load(currentUser); clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed)); function onQuerySucceeded() { var groupEnumerator = collGroup.getEnumerator(); while (groupEnumerator.moveNext()) { var oGroup = groupEnumerator.get_current(); var collUser = oGroup.get_users(); var userEnumerator = collUser.getEnumerator(); while (userEnumerator.moveNext()) { var oUser = userEnumerator.get_current(); if (oUser.get_loginName() == currentUser.get_loginName()) { $scope.UserGroups.push({ ...

I have been coding a simple Single Page Application solution using Angular JS running a in content editor web part in SharePoint 2010. I had the following code in my .aspx page: <div class="table-cell mainbody"> <div> <div id="first" ng-controller="Controller1" ng-include="src='/StyleLibrary/pages/first.Module.html'" > </div> <div id="second" ng-controller="Controller2" ng-include="src='/StyleLibrary/pages/second.Module.html'" > </div> </div> </div> However, when I ran $("#second") in my console window, I received an empty object. Hmmmmmm. It appears that that each module injection needs to be surrounded by its own DIV, so I change the code to the following to make it work: <div class="table-cell mainbody">  <div> <div id="first" ng-controller="Controller1" ng...

My current project (using Angular JS on SharePoint 2010) requires a modal dialog window with some data passed between the different modules. We used dialog-service  from GitHub, which is a great utility for this purpose. All was great until I deployed the solution to a new environment. Suddently, my modal dialog stopped working and was complaining about 'initialization' issues. I stepped through the code and found that the initialization code was being called and  dialog.ref.is(':data(dialog)') was returning true. So what was different? To cut a long story short, the culprit was the Document ID Service (which was enabled on the new environment). It was appending text to the HTML, which was causing all the problems. Two solutions presented themselves: 1. Disable the feature (not likely) or 2. trim the appended text: if (html.indexOf('<html xmlns:') >= 0)    html = html.substring(0, html.indexOf('<html xmlns:')){ } I chose the lat...

Content Editor Web Parts are fantastic for rendering content, but there is small problem if you want to reference a file (through a ContentLink) on another site collection - you are not allowed to! Cross-site scripting is not a good thing. This problem becomes apparent when you have a 'source' site collection that will host all the html/js files and you want all other site collections to reference this (single) source of truth. There are a few options available to resolve the problem. 1. Copy all the JS/Html files to each site collection and reference them locally. (Easy, but it will create a maintenance nightmare if you have lots of site collections). 2. Enable Anonymous access to the 'source' site collection. (Easy, but not a great solution) 3. Install  Content Link Web Part  from Codeplex. (Better, but requires a Farm Solution) 4. Move the link from the ContentLink to the Content in the webpart. The key to resolving the problem is nested CDATA tags. In my ...

Rendering HTML with Angular should be a simple task - ng-bind-html should do the trick. (see  here ). However, I was struggling to do the same thing in an 'ng-repeat'. I tried using  $sanitize , but that did not work. Eventually, I found the solution on  stackoverflow : instead of having the iteration sitting above the rendering, one can consolidate the two to produce the required result. So                 <span ng-repeat="item in items" me-update-flexslider="y">    <span class="ng-bind-html:{{item}}"></span>                 </span> became                 <span ng:repeat="item in items" ng-bind-html="item"></span>