如何将页面上已有的JavaScript对象传递给AngularJS模板

我的页面上有一个绑定到JavaScript数组的KendoUI网格。单击网格中的一行时，将触发行更改事件，我将获取表示该行的对象。现在我想使用AngularJS的模板绑定到该模型，如下所示

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

---

这给了我rowSelected没有在绑定网格更改事件的行上定义。我假设这是因为网格在角度控制器中看不到rowSelected事件？

您需要做一些更改。通常，ng模型用于输入，但在您的情况下，我们可以使用它作为标记，将角度世界与非角度世界连接起来

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

你看过吗？看一看。您必须向div添加一个属性：

on-change="rowSelected(kendoEvent)"

然后需要在控制器中定义一个函数：

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

---

如果您不知道如何定义控制器并在HTML中使用它，请查看。

JSON是一种将JavaScript对象表示为字符串的协议。也许你指的是JavaScript数组和JavaScript对象？

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);
    });
}

on-change="rowSelected(kendoEvent)"

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