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

Question

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

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

名字和姓氏都是行对象的属性。所以我想问的是，我该如何在AngularJs控制器之外设置模型？

我刚开始学习Angular，所以我的问题可能不太好，如果是这样，请告诉我原因。

更新

根据Pieter的答案，我尝试用“Angular Kendo”实现此目标。

我正在使用MVC帮助程序来渲染网格，我的代码类似于：

<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>

我希望在选择一行数据时，该对象的firstname属性会显示在结果div中。涉及到it技术相关内容。

我的Angular控制器如下所示...

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

这让我在绑定网格改变事件的行上看到了“rowSelected未定义”的错误。我猜这是因为网格无法在angular控制器中看到rowSelected事件？

- Gavin

---

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

Answer 1

你是否看过Angular Kendo？可以看看数据源示例。你需要在div中添加一个属性：

on-change="rowSelected(kendoEvent)"

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

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

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

- Pieter Herroelen

Answer 2

你需要做一些更改。通常情况下，ng-model用于输入框，但在你的情况下，我们可以将其用作标记，将Angular世界与非Angular世界连接起来。

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

ng-model仅绑定到当前作用域上的JavaScript对象，因此如果您需要访问其中的属性，则需要直接引用它。

从外部（非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);
    });
}

演示

- Liviu T.