4

我的页面上有一个绑定到 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 事件？

4

2 回答 2

2

你看过Angular Kendo吗？查看数据源示例。您必须向 div 添加一个属性：

on-change="rowSelected(kendoEvent)"

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

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

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

于 2013-06-18T12:20:14.933 回答
1

您需要进行一些更改。通常 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);
    });
}

演示

于 2013-06-18T12:19:45.870 回答