Add title dynamically in Orchard CMS

Question

I'm creating a web site with Orchard. With AngularJS I'm reading data from ASP.NET web API project and I'm displaying the data on my web site. What I want to do is to display the title of the page and the metadata.

I have tried this for the title, but I get the following error:

<div ng-controller="bookDetailController" data-ng-init="AddReaded()" ng-cloak>
 @{
     Layout.Title = {{book.Title}};
  }

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0820: Cannot initialize an implicitly-typed local variable with an array initializer

Answer 1

Razor is compiled on the server side, so it won't ever know of the changes on the frontend. What you can do instead is create some directive like this:

angular.module("myApp", [])
    .directive("pageTitle", function($document) {
        return {
            restrict: "A",
            scope: {
                pageTitle: "=",
            },
            link: function(scope, elem) {
                scope.$watch("pageTitle", function(newval) {
                    $document.title = newval;
                });
            }
        }
    });

Your would add the title with:

<div 
    ng-controller="bookDetailController" 
    data-ng-init="AddReaded()" 
    ng-cloak 
    page-title="book.Title">