1

angularjs を学習していますが、この概念がどのように機能するかを理解するのに苦労しています。

コントローラーには次のものがあります。

Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
  $scope.selected_customer = resource.customer;
  console.log($scope.selected_customer);
}, function(response) {
});

これは機能します。サーバー側からデータを取得し（私は rails を使用しています）、その console.log は私が期待するものを示しています。

私が問題を抱えている概念は、$scope.selected_customer へのアクセスです。

たとえば、この次のケースでは、2 番目のログには、私が期待する顧客オブジェクトが表示されませんが、代わりに、おそらく約束である角度のあるオブジェクトが表示されますか? (私は不安定な 1.1.4 fyi を使用しています)。 

test = Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
  $scope.selected_customer = resource.customer;
  console.log($scope.selected_customer);
}, function(response) {
});

// undefined
console.log($scope.selected_customer);
// angular object b{$resolved: false, $then: function, $get: function, $save: .... }
console.log(test);

したがって、テンプレートにこの顧客に関する情報を表示したい場合、現時点では不可能です。

これが完全なコントローラーです。オブジェクトを取得してから、この選択した顧客を編集するためのテンプレートの場所を変更したいことがわかります。

function CustomersEditController($scope, $location, Customer) {
  $scope.edit_customer = function(customer_id) {
    Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
      $scope.selected_customer = resource.customer;
      $location.path('/customers/' + customer_id_id + '/edit');
    }, function(response) {
      console.log('ERROR');
    });
  };
};

そのスコープの問題により、フォームに selected_customers プロパティが入力されないことを除いて、これは正常に機能します。

これが私のサービスです：

var customer_service = angular.module('customer_service', ['ngResource', 'ui']);

customer_service.factory('Customer', function($resource) {
  return $resource('/customers/:id/:action', {id: '@id'}, {
    update: { method: 'PUT' }
  });
});

私のフォームはテンプレートにあります（ Slim を使用）

  div.center
    form(ng-submit='submit()' ng-controller='CustomersEditController')
      input(type='text' ng-model='selected_customer.first_name')

私はrouteProviderを使用しています：

angular.module('customer_app', ['customer_service'])
  .config(['$routeProvider', function($provider) {
    $provider.when('/:customer_id/edit/', { templateUrl: '/assets/customers/edit.html.slim', controller: 'CustomersController' });
  }])
  .config(["$httpProvider", function(provider) {
    provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
  }]);

これが私の Rails インデックス ページで、パーティーが始まります。

div(ng-app="customer_app")
  h1 Customers
    div(ng-view)

私が見逃した（または誤解した）可能性のあるドキュメントへのヘルプまたはリンクは素晴らしいでしょう！

4

1 に答える 1

1

投稿した JavaScript に基づいて、コントローラーはCustomersEditController. $location.pathただし、 を使用してURL を切り替えると$routeProvider、新しいルートが読み込まれ、CustomersController代わりにインスタンス化されます ( で定義$routeProvider)。

ルート$routeProviderを変更してコントローラーのインスタンスを作成するたびに、古いコントローラーはなくなります。そのため、$scopeURL を変更するとデータが失われます (新しいコントローラーは独自のスコープを取得します)。

これを修正するには、新しいコントローラーに到達したときにユーザーをロードします。

function CustomersEditController($scope, $location) {
  $scope.edit_customer = function(customer_id) {
    $location.path('/customers/' + customer_id_id + '/edit');
  };
};

function CustomersController($scope, $location, $routeParams, Customer) {
  var customer_id = $routeParams.customer_id; // from $routeProvider
  Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
    $scope.selected_customer = resource.customer;
  }, function(response) {
    console.log('ERROR');
  });
};

もちろん、ユーザー ID が有効でない場合は、エラーを表示するか、以前の URL にリダイレクトする必要があります。

もう 1 つのオプションはresolve、ルート構成でプロパティを使用することです。基本的にresolve、新しいコントローラーが必要とするデータを定義することができ、新しいルートに切り替える前にそのデータが利用可能であることを確認し、データを新しいコントローラーに挿入できます。promiseを使用することで、非同期に読み込まれたデータも使用できます。

$routeProvider.when('/:customer_id/edit/', {
  templateUrl: '/assets/customers/edit.html.slim',
  controller: 'CustomersController',
  resolve: {
    customer: ['$q', '$route', 'Customer', function($q, $route, Customer) {
      var deferred = $q.defer()

      var customer_id = $route.current.params.customer_id;
      Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
        // got our user; change routes now
        deferred.resolve(resource.customer);
      }, function(response) {
        // Uh oh! No user found. Cancel changing routes
        // and trigger a $routeChangeError event
        deferred.reject(response);
      });

      // returning the promise ensures the route won't change
      // until the deferred that generated the promise is resolved
      return deferred.promise;
    }]
  }
});

// lower-case customer is injected based on name from `resolve` in route
function CustomersController($scope, $location, customer) {
  $scope.selected_customer = customer;
};
于 2013-05-11T07:11:53.107 に答える