如何將頁面上已有的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模板

回答

相關問題