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

【问题标题】：How to pass a JavaScript object already on the page in to an AngularJS template如何将页面上已有的 JavaScript 对象传递给 AngularJS 模板
【发布时间】：2013-06-18 22:48:38
【问题描述】：

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

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

FirstName 和 Surname 都是该行对象的属性。所以我想我要问的是如何从 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>

我想要的是在选择该对象中的第一个名称属性时，结果div。

显示

我的角度控制器看起来像这样......

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。我认为这是因为网格在角度控制器中看不到 rowSelected 事件？

【问题讨论】：

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

标签： javascript angularjs

【解决方案1】：

你看过Angular Kendo 吗？看看The data source example。您必须向 div 添加一个属性：

on-change="rowSelected(kendoEvent)"

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

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

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

【讨论】：

【解决方案2】：

您需要进行一些更改。通常 ng-model 用于输入，但在您的情况下，我们可以将其用作标记，将角度世界与非角度世界联系起来。

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

ng-model 只绑定到当前作用域上的一个 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);
    });
}

Demo

【讨论】：