0

我有一个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()。

4

1 回答 1

1

根据评论编辑

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

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

将得到正确的范围。您的 plunkr 仅在此更改后工作

原始答案

从您的 plunkr 看来，您实际上并没有得到正确的范围。

我用更标准的方式分叉了你的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" }];
    };

只需将您的功能作为控制器范围的一部分。然后使用按钮调用该函数，就像将数据放入网格中一样。

您可以轻松地将这些静态数据替换为来自远程源的数据

于 2013-07-01T21:21:40.493 回答