1

次の単純な CRUD ベースのコードがあります (ほとんどは AwesomeTodo チュートリアルから取得したものです)。これは 1 つの 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);

それは恐ろしいです。適用またはダイジェストを使用することはできません。また、使用する必要もありません。

4

1 に答える 1

1

コードと jsFiddle をざっと見てみると、これまでに次の問題に遭遇しました。

  • フレームワークの読み込みは、jsFiddle 設定で「onLoad」ではなく「ラップなし (ヘッド)」に設定する必要があります。
  • このngAppディレクティブは、アプリケーションをブートストラップするためにどこでも使用されていません
  • ngControllerコントローラーを指定するディレクティブがありますが、AppCtrlそのコントローラーは使用するアプリケーション モジュールに登録されていませんmodule.controller(これは単なる独立した変数です)。
  • DOM を操作するために jQuery を使用して呼び出されるコントローラー関数ngClick- これは Angular では大したことではない (DOM 操作にはコントローラーではなくディレクティブを使用する) だけでなく、jQuery ライブラリーは jsFiddle にも含まれていません。
于 2013-01-30T06:15:39.710 に答える