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 js与jquery函数冲突？

Answer 1

更改范围的angular core之外的任何事件都需要通知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>

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

2 个答案: