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

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

本文关键字：对象 JavaScript 模板 AngularJS      更新时间：2023-09-26

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

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

FirstName和姓氏都是该行对象上的属性。我想问的是，如何从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中。

我的角控制器是这样的....

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事件?

你看过Angular剑道吗?请看一下数据源示例。你必须给div添加一个属性:

on-change="rowSelected(kendoEvent)"

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

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

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

您需要做一些更改。通常ng-model用于输入，但在你的例子中，我们可以用它作为一个标记来连接有角世界和非有角世界。

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

相关文章：