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

我的页面上绑定了一个JavaScript数组，它有一个KendoUI网格。当点击网格中的一行时，行更改事件触发，我抓取表示该行的对象。我现在想用AngularJS的模板绑定到该模型是这样的...如何将页面上已有的JavaScript对象传递给AngularJS模板

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

两个名字和姓氏是该行的对象的属性。所以我想我要问的是如何从AngularJs控制器的外部设置模型？

我只是选择Angular，所以我问的可能是一个坏主意，如果是这种情况，请让我知道为什么。

更新

按照彼得的答案我已经试过用“角剑道”

我使用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事件？

来源

2013-06-18 Gavin

JSON是一种将JavaScript对象表示为字符串的协议。也许你的意思是JavaScript数组和JavaScript对象？ – 2013-06-18 11:21:41

对不起，我喜欢。 – Gavin

您需要进行一些更改。通常ng-model用于输入，但在你的情况下，我们可以使用它作为标记来将角世界与无角世界连接起来。

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

NG-模型仅结合于当前范围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

来源

2013-06-18 12:19:45

你看着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。

来源

2013-06-18 12:20:14

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

回答

相关问题