无法使用ng-repeat将数据加载到表中

Question

码：

    var app = angular.module('myApp', ['smart-table']);
    app.controller('MyController', function ($scope) {
        $('#get').click(function ($scope)
        {
            $.ajax({
                url: 'JsonProcessor.do',
                type: 'get',
                dataType: 'json',
                success: function (data)
                {
                    $scope.rowCollection = data[0];
                    console.log("Result from Database: ", data[0]);
                    console.log("typeOf json is: " + jQuery.type(data));
                }
            });
            $('#dialog').show();
        });
    });

<div id="dialog" class="bs-example web_dialog">
    <table st-table="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th>Unique Id</th>
                <th>Date Created</th>
                <th>Doc Url</th>
                <th>Time Stamp</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td>{{row.ID}}</td>
                <td>{{row.DATE_CREATED}}</td>
                <td>{{row.URL}}</td>
                <td>{{row.TIMESTAMP}}</td>
            </tr>
        </tbody>
    </table>
</div>

是否因为我没有使用$ http来获取数据？ 我尝试使用$ http并抛出错误：

Uncaught TypeError: $http is not a function(anonymous function)
@ (index):197jQuery.event.dispatch 
@ joint.js:4683jQuery.event.add.elemData.handle
@ joint.js:4367

检查DOM仅显示表头和<tbody>注释掉。

我猜角度js与jquery函数冲突？

Answer 1

角度范围之外的任何会改变范围的事件都需要通知角度来运行摘要循环以更新视图。

由于您没有使用angular $http来发出ajax请求，因此您需要在成功回调中执行此操作

success: function (data){
    $scope.rowCollection = data[0];
    $scope.$apply();
    console.log("Result from Database: ", data[0]);
    console.log("typeOf json is: " + jQuery.type(data));
}

$http不是函数的错误意味着您没有将$http注入控制器

Answer 2

您的问题是您正在尝试混合使用jQuery和Angular。 这是不安全的，没有任何人推荐。

Angular无法知道jQuery是否正常工作，因为您使用了jQuery侦听器（带有$('#get').click(...) ）。 如果要使用Angular，请使用它。 使用ng-click指令并使用$http服务。

var app = angular.module('myApp', ['smart-table']);

app.controller('MyController', function ($scope, $http) {
    $scope.get = function() {
        $http.get('JsonProcessor.do').success(function(data) {
            $scope.rowCollection = data[0];
            console.log("Result from Database: ", data[0]);
            console.log("typeOf json is: " + jQuery.type(data));
        });
        $('#dialog').show();
    });
});

<div id="get" ng-click="get()">GET</div>
<div id="dialog" class="bs-example web_dialog">
    <table st-table="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th>Unique Id</th>
                <th>Date Created</th>
                <th>Doc Url</th>
                <th>Time Stamp</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td>{{row.ID}}</td>
                <td>{{row.DATE_CREATED}}</td>
                <td>{{row.URL}}</td>
                <td>{{row.TIMESTAMP}}</td>
            </tr>
        </tbody>
    </table>
</div>