如何让AngularJS检查并使用Rails后端的数据?

时间:2014-08-28 20:11:19

标签: ruby-on-rails node.js angularjs unique directive

就像说我想确保有人注册时没有使用预先存在的电子邮件地址。如何使AngularJS文件与Rails用户模型/用户数据库交互以查看?这里有NodeJS吗?这可以通过“独特”指令(我希望遵循的方法)来完成吗?

我使用的是AngularJS的1.3.0-beta.18版本。我不知道改变了什么 - 仍然使用$ parse函数?如何使用$ validators管道设置一个setValidity?

编辑: 我从http://www.ng-newsletter.com/posts/validations.html看到了这个例子。如何使其适应典型的Rails设置 - 用户控制器,用户模型和用户数据库?如果我在Users控制器中有一个“唯一”方法来查询用户模型以查看是否有该电子邮件参数的条目,该怎么办?这个“唯一”方法由“唯一”AngularJS指令调用,该指令在注册表单中调用。当我执行“rake routes”时,我已经有了一条“独特的”JSON路由,以及一条“独特的”HTML路由。我知道如何在表单中调用指令以及如何在表单中进行错误检查,因此这不是问题。

app.directive('ensureUnique', ['$http', function($http) {
  return {
    require: 'ngModel',
    link: function(scope, ele, attrs, c) {
      scope.$watch(attrs.ngModel, function() {
        $http({
          method: 'POST',
          url: '/api/check/' + attrs.ensureUnique,
          data: {'field': attrs.ensureUnique}
        }).success(function(data, status, headers, cfg) {
          c.$setValidity('unique', data.isUnique);
        }).error(function(data, status, headers, cfg) {
          c.$setValidity('unique', false);
        });
      });
    }
  }
}]);

最新编辑2014年8月29日: 所以这是我正在使用的代码,但它不起作用。 FormCtrl控制器和用户工厂的表单提交很棒,但UniqueEmail工厂和EnsureUnique指令不起作用。所有标准的AngularJS指令(如ng-minlength)在HTML表单中都能正常工作。

我有Rails路由api / users / unique和users / unique。我不太确定使用哪个,我假设api / users / unique?

这是我的Rails控制器方法'唯一'代码:

class UsersController < ApplicationController
include AngularController



def new
  @user = User.new
  respond_with @employee
end

def create
        @user = User.create(params.permit(:email, :name, :password,  :password_confirmation))
        if @user.save
        session[:@user_id] = @user.id
        redirect_to root_url
        else
        render 'new'
        end

end 
def unique
if User.exists?(:email => params[:email])
return true
end
end
end

module AngularController
  extend ActiveSupport::Concern

  included do
    respond_to :html, :json
    around_action :without_root_in_json
  end

  def without_root_in_json
    ActiveRecord::Base.include_root_in_json = false
    yield
    ActiveRecord::Base.include_root_in_json = true
  end
end

这是我的AngularJS代码:

     mainapp.factory("UniqueEmail", function($resource) {
     return {
      states: $resource('/users/unique.json', {}, {
        query: { method: 'GET', params: {}, isArray: false }
      })
    };
  });

mainapp.factory("User", function($resource) {
  return $resource("/users/:id", {
    id: "@id"
  });
});


app.directive('ensureUnique', ['$http', function($http) {
  return {
    require: 'ngModel',
    link: function(scope, ele, attrs, c) {
      scope.$watch(attrs.ngModel, function(value) {
        $http.get({
          url: '/users/unique',
          params: {"email": value}
        }).success(function(data, status, headers, cfg) {
          c.$setValidity('unique', false);
        }).error(function(data, status, headers, cfg) {
          c.$setValidity('unique', true);
        });
      });
    }
   }
}]);

mainapp.controller("FormCtrl", function($scope, User, UniqueEmail) {
  $scope.user = new User();
  $scope.users = User.query();
  $scope.password_confirmation = null;

  $scope.add = function() {
  $scope.users.push(User.save({
  name: $scope.user.name,
  email: $scope.user.email,
  password: $scope.user.password,
  password_confirmation: $scope.user.password_confirmation
  }));
  return $scope.user = new User();
  };
  return $scope["delete"] = function($index) {
   if (confirm("Are you sure you want to delete this user?")) {
  $scope.users[$index].$delete();
  return $scope.users.splice($index, 1);
  }
  };
  });

1 个答案:

答案 0 :(得分:2)

只需通过$http发出angular-request,并在rails-app中提供rest-endpoint。

理想情况下,您使用$resourcerestangular之类的内容,因为通常您希望进行一些CRUD操作,而且这些操作非常合适。

另一种选择是将其与Angular Rails Templates一起使用。 here is a good post, on how to do this。此链接也是使用最后一个ng-newsletters

发布的