I am trying to use Angular Directive with MVC. Following Alex's blog post https://asmagin.com/2016/07/05/using-angularjs-directives-in-sitecore-edit-mode/ It is supposed to be working. But I am keep running into a problem.
I was able to get Text and Title to render in the browser (not logged in, preview mode).
When I open the page in Experience Editor, it breaks for me with the layout that has my angular code. So I am trying to solve the problem of double quotes, Sitecore outputs long line of code for the editing purposes, and this is where it all breaks, if anyone can help it would be greatly appreciated.
Layout Code (angularLayout.cshtml)
@using Sitecore.Mvc
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>angular Layout | @Html.Sitecore().CurrentItem.Name</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="~/Scripts/angular-stuff.js?v=1.1"></script>
</head>
<body ng-app="sc.sample">
<div class="container" ng-controller="SampleDemoController">
<div sample-component='{Title: "@Html.Sitecore().Field("Title")",Text: "@Html.Sitecore().Field("Text")"}'></div>
</div>
</body>
</html>
Angular Code (angular-stuff.js)
angular.module('sc.sample', [
'ngSanitize'
]).directive('sampleComponent', function () {
return {
scope: {
data: '=sampleComponent'
},
template: `
<section class="row page-header sampleComponent spaced-row" ng-show="data">
<div class="col-xs-12">
<h1 class="header" ng-bind-html="data.Title | asTrusted"></h1>
</div>
<article class="col-md-8">
<p ng-bind-html="data.Text | asTrusted"></p>
</article>
<figure class="col-md-4">
<p ng-bind-html="data.Image | asTrusted"></p>
</figure>
</section>
`
};
}).controller('SampleDemoController', ['$scope', function ($scope) {
$scope.data = {
Title: 'Title Text that is coming from Angular JS file',
Text: 'Text that is coming from Angular JS file <br> Second line of Text that is coming from Angular JS file',
Image: '<img src="https://unsplash.it/400/400">'
};
}]).filter('asTrusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}])
When I visit the page it looks good with no errors.
When I visit in Experience Editor it is blank:
And the error message, I have a feeling it has to do with double quotes, or the timing:
Any Recommendations or help would be greatly appreciated.
