1

我有以下简单的基于 CRUD 的代码（大部分来自 AwesomeTodo 教程）。这是一个 html 文件，只是一个网格，当调用 create() 时，我希望 UI 会更新。这个应用程序有效！当我创建新记录时它只是不刷新视图，我必须刷新显然重新加载资源的浏览器。

<div id="apps-table" compile="html">
<table ng-controller="AppCtrl" class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>Name</th>
        <th>URL</th>
        <th>Label</th>
        <th>Description</th>
        <th>Status</th>
        <th>Location</th>
        <th><a ng-click="promptForNew()"><li class="icon-plus"></li>&nbsp;New App</a></th>
    </tr>
    </thead>
    <tbody>
    <tr style="display:none" id="add-app-row">
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
        <td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
            <option value=1>Active</option>
            <option value=0>Inactive</option>
        </select>
        </td>
        <td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
            <option value=0>Internal</option>
            <option value=1>External</option>

        </select></td>
        <td>
            <a ng-click="create()" id="save_new" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
        </td>
    </tr>
    <tr ng-repeat="app in Apps.record" id="row_{{app.fields.id}}">
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
        <td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
                <option value=1>Active</option>
                <option value=0>Inactive</option>
            </select>
        </td>
        <td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
            <option value=0>Internal</option>
            <option value=1>External</option>
        </select></td>
        <td>
            <a ng-click="save()" id="save_{{app.fields.id}}" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
            <a class="btn btn-small btn-danger" ng-click="delete()"><i class="icon-trash"></i></a>
        </td>
    </tr>

    </tbody>
</table>


var AdminApp = angular.module("AdminApp", ["ngResource"]).
config(function($routeProvider) {
    $routeProvider.
        when('/', { controller: AppCtrl, templateUrl: 'applications.html' }).
        otherwise({ redirectTo: '/' });
});
AdminApp.factory('App', function($resource) {
return $resource('/rest/system/app/:id/?app_name=admin', {}, { update: { method: 'PUT'}});});
var AppCtrl = function ($scope, App) {
$scope.Apps = App.get();
$scope.formChanged = function(){
    $('#save_' + this.app.fields.id).removeClass('disabled');
};
$scope.promptForNew = function(){
    $('#add-app-row').show();
};
$scope.save = function () {
    var records = {};
    var record = {};
    record.fields = this.app.fields;
    delete record.fields.name;
    records.record = record;
    var id = this.app.fields.id;
    App.update({id:id}, records, function () {
        $('#save_' + id).addClass('disabled');

    });
};
$scope.create = function() {
    var currentScope = $scope;
    var records = {};
    var record = {};
    record.fields = this.app.fields;
    records.record = record;
    App.save(records, function() {
        $('#add-app-row').hide();
    });
};
$scope.delete = function () {
    var id = this.app.fields.id;
    App.delete({ id: id }, function () {
        $("#row_" + id).fadeOut();
    });
};

};

这是 index.html：

<!DOCTYPE html>
<html ng-app="AdminApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/lib/web-core/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="/lib/web-core/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
<script src="/lib/web-core/js/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/resource.js"></script>
<script src="/lib/web-core/js/jquery.js"></script>
<script src="/lib/web-core/js/bootstrap.min.js"></script>

</body>
</html>

我所有的操作都是通过 ng-click，所以我似乎没有在“Angular 之外”做任何事情

问题是，这段代码是否正常工作？还是应该真正更新？

我可以更新范围的唯一方法是手动使用：

$scope.Apps.record.push($scope.app);

那太可怕了。不能使用 apply 或 digest，我也不应该这样做。

4

1 回答 1

1

浏览您的代码和 jsFiddle，到目前为止，我遇到了以下问题：

  • 框架加载需要在jsFiddle设置中设置为“no wrap(head)”而不是“onLoad”
  • 该ngApp指令不在任何地方用于引导应用程序
  • 有一个ngController指令指定AppCtrl控制器，但该控制器未使用应用程序模块注册module.controller（它只是一个独立变量）
  • 通过ngClick使用 jQuery 调用的控制器函数来操作 DOM——这不仅是 Angular 中的一个大禁忌（使用指令，而不是控制器，用于您的 DOM 操作），而且 jQuery 库甚至不包含在 jsFiddle 中。
于 2013-01-30T06:15:39.710 回答