Deze blog posten wordt beschreven hoe u meerdere kan hebben Angular.js op basis van SharePoint-webonderdelen (waarnaar wordt verwezen via een webonderdeel Inhoudseditor) op dezelfde pagina. Ik roep een webonderdeel Inhoudseditor (CEWP) waarin wordt verwezen naar JavaScript gebouwd met behulp van het Angular.js kader een 'hoekige webonderdeel.'

Hoekige de bootstrap proces is super eenvoudig en zowat elke voorbeeld u op de internets vindt gaat iets als dit:

<HTML-ng-app = 'Mijntoep'>

<bla /><bla /><bla />

</HTML>

Dit breekt, echter, Als u wilt inschakelen meerdere CEWP die meerdere hoekige webonderdelen op dezelfde pagina. Hoekige zal alleen automatisch bootstrap tegen de eerste ng-app richtlijn het gezochte – ten minste vanaf hoekige versie 1.3.6. De oplossing is vrij eenvoudig-handmatig bootstrap uw code in plaats daarvan. Het bovenstaande nu verandert in iets als dit:

<lichaam>
<dIV id =”bootstrapHere” ng-controller =”myController als theController”>
<bla /><bla /><bla />
</div>
</lichaam>

<script src =”//Ajax.googleapis.com/Ajax/libs/angularjs/1.3.6/angular.js”></script>

<script>
angular.bootstrap(angular.element(document.getElementById(“bootstrapHere”)),['Mijntoep']);
</script>

In principe, in plaats van met behulp van ng-app op het element te doen uw bootstrappen, u klap een ID naar dat element. Vervolgens, Gebruik de bootstrap() methode op hoekige zelf om te controleren het bootstrappen verwerken op run-time. Ik heb dit met drie verschillende hoekige webonderdelen op dezelfde pagina getest en het werkt een charme.

</einde>

Abonneren op mijn blog.

Volg mij op Twitter op http://www.twitter.com/pagalvin