Question

我有一个plunkr，其中包含以下代码

HTML

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div id="myGrid" class="gridStyle" ng-grid="gridOptions"></div>
        <button onclick="hi()" type="button">hi</button>
    </body>
</html>

JS

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.gridOptions = {
        data: 'myData',
        showFilter: true,
        columnDefs: [{ field: "name", width: 120 , displayName : "Name" },
                    { field: "age", width: 120 },
                    { field: "birthday", width: 120 },
                    { field: "salary", width: 120 }]
    };
    $scope.myData = [];
});


function hi()
{
scope = angular.element($("#myGrid")).scope();
console.log( $("#myGrid") , angular.element($("#myGrid")) , scope );
if( scope )
scope.$apply(function(){
        scope.myData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
                    { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" }];
    })
}

现在，当我单击按钮hi时，我希望能够通过调用apply（）和设置myData将表的内容设置为我想放在那里的任何内容。但它不起作用..我做错了什么？

基本原理：基本上我有一个复杂的逻辑（比内置缓存功能更复杂）来检查localStorage，然后在需要时通过REST调用检索新数据。除此之外，它是三个REST调用，其结果需要组合。因此，对于我来说，能够在跳过一些箍之后能够检索正确的范围，分配数据和apply（）似乎是最容易的。

Answer 1

根据评论编辑

如果你想获得正确的范围，你只需要将id移动到控制器元素。

<body ng-controller="MyCtrl" id="myGrid">

将获得正确的范围。只有在这个改变之后你的plunkr才能运作

ORIGNAL ANSWER

从你的傻瓜看来，你实际上没有得到正确的范围。

我用更标准的方式分叉您的plunkr以获取网格中的数据。我添加了一个ng-click处理程序，以便它可以获取控制器的范围。

<button ng-click="hi()" type="button">hi</button>

然后将hi函数添加到控制器

    $scope.hi = function(){
        $scope.myData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
                         { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" }];
    };

将您的功能作为控制器范围的一部分。然后使用按钮调用该函数，以便将数据导入网格。

您可以使用来自远程源的数据轻松替换此静态数据

使用外部数据更新ng-grid

1 个答案: