1

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.

Good

When I visit in Experience Editor it is blank:

Blank

And the error message, I have a feeling it has to do with double quotes, or the timing: enter image description here

Any Recommendations or help would be greatly appreciated.

2

There is a helper method @Html.RawJsEncodedString in my post that you need to use here.

You need to wrap you @Html.Sitecore().Field("Title") in that method so that it will encode quotes and correctly output it via ng directive.

  • I was including everything in the cshtml thats why it was not working. Finally figured out. Everything works smoothly. had to create a separate Controller and thats how it worked. – Tony Jun 19 '17 at 20:46

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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