How to pass a JavaScript object already on the page to an AngularJS template

Question

I have a KendoUI grid in my page associated with a JavaScript array. When I click a row in the grid, a row change event occurs, and I grab the object representing this row. Now I want to use AngularJS templates to bind to this model like this ...

<div ng-app ng-model="currentRecord"> {{FirstName}} - {{Surname}} </div> 

Both FirstName and Surname are object properties for the string. So I assume that I am asking how to install the model from outside the AngularJs controller?

I am only collecting Angular, so what I ask may be a bad idea, if this is the case, please let me know why.

Update

According to Peter’s answer, I tried to achieve this using Angular Kendo

I use MVC helpers to render the grid and my code is as follows

 <div ng-app="ngUsers"> <div ng-controller="UserCtrl"> <div class="span6"> @(Html.Kendo().Grid(Model) .Name("Grid") .Columns(columns => { columns.Bound(p => p.Id).Hidden(true); columns.Bound(p => p.FirstName); columns.Bound(p => p.LastName); }) .Groupable() .Pageable() .Sortable() .Scrollable() .Filterable() .Selectable() .Events(e => e.Change("rowSelected")) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("AjaxList", "User")) ) ) </div> <div id="results"> {{FirstName}} </div> </div> </div> 

When I select a row, I want the firstname property in this object shown in the result div.

My Angular controller looks like this.

 var ngUsers = angular.module('ngUsers', ["kendo.directives"]); ngUsers.controller("UserCtrl", function ($scope) { $scope.rowSelected = function (kendoEvent) { var grid = kendoEvent.sender; var selectedRow = grid.select(); $scope.user = selectedRow; }; }); 

This gives me rowSelected not defined in the row that binds the grid change event. I assume this is because the grid cannot see the rowSelected event in the Angular controller?

Answer 1

You need to make a couple of changes. Usually an ng model is used on inputs, but in your case we can use it as a marker to refer to the angular world with the angular world.

 <div ng-app="plunker" ng-model="currentRecord" ng-show="currentRecord"> {{currentRecord.FirstName}} - {{currentRecord.Surname}} </div> 

ng-model only binds to a javascript object in the current scope, so if you need to access properties from it, you need to reference it directly.

Updating the model from an external source (not angular)

 function myExternalFunction() { //external code // we need to get the element and wrap it in an angular element var $element = angular.element('[ng-model="currentRecord"]'); var scope = $element.scope(); //the ngModel controller will have the correct apis var ngModelController = $element.controller('ngModel'); //the external data var model = {'FirstName' : 'John', 'Surname': 'Smith'}; //$apply to notify angular that the models have changed from outside scope.$apply(function() { //$viewValue is only useful for inputs not divs. ngModelController.$viewValue = model; //this will actually set the value on the scope ngModelController.$setViewValue(model); }); } 

Demo

Answer 2

Have you watched Angular Kendo ? See Sample Data Source . You must add the attribute to the div:

 on-change="rowSelected(kendoEvent)" 

and then you need to define the function in the controller:

 $scope.rowSelected = function(kendoEvent) { var grid = kendoEvent.sender; var selectedRows = grid.select(); ... } 

If you don’t know how to define a controller and use it in your HTML, check out this quick video .