Passing data from C# to angular js html

Question

I'm building a application using CefSharp which only shows a webpage. I just want to know how do we pass data from my C# app (using CefSharp) to a html which contain a angularjs controller?

For example, if my data are hardcoded, it will be like below:

MainController.js:

app.controller('MainController', ['$scope', function($scope) { 
 $scope.qnumbers = [  // hardcoded data
  {
      counter : 'A',
      number : '3456'
  },
  {
      counter : 'B',
      number : '1234'
  },
  {
      counter : 'C',
      number : '7890'
  },
  {
      counter : 'D',
      number : '1122'
  },
  {
      counter : 'E',
      number : '6677'
  },
  {
      counter : 'F',
      number : '5656'
  },
 ]; 
  }]);

Then my html would be something like this:

                <div class="reg" ng-repeat="qnumber in qnumbers">
                   div class="u1">{{qnumber.counter}}</div>
                   <div class="u2">{{qnumber.number}}</div>
                </div>

What if now my data is not hardcoded but comes from my C# application, how would I have to write in my html? How do we pass the data into the MainController?

Answer 1

Check out this documentation How do you call a Javascript method from .NET?

You can do anything you want if you successfully use this. For example, set up a $scope.$watch on one global variable, let's say qnumber.updated and then update $scope.qnumbers with data passed by your C# code once the watch gets triggered.

Note that you will have to manually trigger a digest process after you change the global variable outside of angular.

Example:

angular.module('app', [])
  .controller('Main', function($scope) {
    $scope.$watch(function() {
      return window.qnumbers;
    }, function(data) {
      $scope.qnumbers = window.qnumbers || 'default';
    });
  });

You can execute the following command to fire this watch.

window.qnumbers = [1,2,3];
angular.element(document.getElementById('ctrl')).scope().$apply();
// ctrl is the id of you controller container

Check out this link as an example, and try to execute the command above in the console. You can do the same within your EvaluateScriptAsync method http://codepen.io/anon/pen/wGzXKv

Answer 2

$scope is completely private and cannot be directly accessed from outside the MainController code. To get data into the $scope you have to initiate the request from inside the $scope like with $http.get . You can use ng-init to provide values from the server to an angular script at the pages initial load time, but after that you need to work from inside the scope.

bind to a function

You could invert this by binding to a function which itself requests the new data. To do this "properly" ¹ you would want to create a service which gets the qnumbers and inject that service to your controller. I'm providing a example here of how to do without the service. Your HTML would be

            <div class="reg" ng-repeat="qnumber in getQnumbers()">
               div class="u1">{{qnumber.counter}}</div>
               <div class="u2">{{qnumber.number}}</div>
            </div>

and your angular would be

app.controller('MainController', ['$scope', function($scope) { 
    $scope.getQnumbers = function() {
        return window.cefSharpQnumbers;
    };
}]);

Then in your EvaluateScriptAsync script you would store the result to window.cefSharpQnumbers .

$watch

Similar to the above approach, but your angular code uses a normal binding and you create a $watch in the scope to update your scope when non scope items change. The $watch code really belongs in either a service or a directive (as discussed above).

app.controller('MainController', ['$scope', function($scope) { 
    $scope.$watch("window.cefSharpQnumbers", function(newValue, oldValue) {
        $scope.qnumbers = window.cefSharpQnumbers;
    });
}]);

Warning: This approach might cause your screen to "jump" a little bit when the qnumbers are updated.

Original ng-init example

Use ng-init . Any values you include in the init code will be set as a property on your scope.

Your code would be along these lines

<div ng-controller="MainController"
     ng-init="{
         myVar1: @Model.Var1,
         myStringVar: '@Model.StringVar'
     }"
>

That would give you access to $scope.myVar1 and $scope.myStringVar in your controller. Note that ng-init runs after your controller function is called so you cannot use the values directly in the controller function.

¹ Putting a direct connection between the controller and the window like this breaks angular's modularization. Using a service would bring that moudualrization back. That makes the code easier to manage and to test.