1

I have written a very simple script to test angularJS ng-repeat. Here is the script


<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script language="javascript" type="text/javascript"> 

var app = angular.module('myApp',[]);
app.controller('myController',function($scope){
    $scope.People=["Name 1","Name 2"];
});

</script>

<div ng-app="myApp">
    <div ng-controller="myController">
        <ul>
            <li ng-repeat="person in People">{{person}}</li>
        </ul>
    </div>
</div>

When I paste this script in a script editor web part and click "Apply" in the web part, the script goes in an infinite loop and keeps on repeating the LI . I have to close the browser tab and open it again. By when I open the site again, the web part looks fine when the page is not in edit mode and the values are properly binded to the "LI".

Looks like the issue occurs only in the edit mode of the page. Any clue what is causing this. I am not able to figure out.

  • What event in the webpart are you using to trigger the javascript? – Brandon C. Jun 13 '14 at 10:05
  • Hi Brandon, I am not using any event. I have just pasted the above code snippet in the script editor webpart and click "Apply" in the web part properties. I did try to write the code in a javascript function and trigger it on a button click. It did not work. – Vipul Kelkar Jun 13 '14 at 11:05
  • If you have a script, and just embed it into a page without any trigger actions, it will continously run until stopped. Try including this in your code: Put your javascript into a function called myFunction or something. Then, before the closing script tag, write "windows.onload = myFunction()" (Gah, keep editing this) This will then only run your code when the page loads, and it should only execute it once. – Brandon C. Jun 13 '14 at 12:02
  • Actually, nevermind, the onload will still do the same thing. If it's your javascript that runs continually, just put a trigger for the event. – Brandon C. Jun 13 '14 at 12:19
  • I can confirm that the script editor web part works with Angular for me and the content editor web part gets re-written over and over. – user33226 Sep 9 '14 at 9:32
1

You Code works if its standard Angular,

http://plnkr.co/edit/PE7pymeqd3Vcn3ndSwiO?p=preview

so something weird in the edit mode of SharePoint?, Remember Angular is an SPA designed for Single Pages, not really to be embedded within SharePoint Web Part Pages,

So perhaps an alternate solution is not to run the code if its in Design Mode

Detect design mode and do something with it, like ng-show perhaps ?

How do I know if the page is in Edit Mode from JavaScript?

If you are in a SP Web Form then are you writing an SPA, would you know be better off with Knockout if you are just databinding ? Tempting as it is to stick with a single framework, sometimes SharePoint is a pain and gets in the way.

0

Try this. Create a new page add a rich content webpart and also add a script web part. In the rich text put your HTML and in the script put all your JS code. This seems to work for me with your example. Let us know if it works for you as well.

0

Try these 2 options.

  1. Use the offline AngularJS script reference rather than referring online.
  2. Change the order of reference and add the Angular reference after the SP.js
0

Download both JS files (angular and jquery), upload them to sharepoint library and refer it from that library. e.g. if you uploaded files to "Site Assets" library then reference will look like

    <script type="text/javascript" src="../SiteAssets/angular.min.js"></script>
    <script type="text/javascript" src="../SiteAssets/jquery-1.9.1.min.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.