将jquery生成的隐藏字段绑定到指令中的angularjs模型

时间:2013-05-11 00:39:16

标签: angularjs angularjs-directive

我正在尝试使用http://keith-wood.name/realPerson.html jquery插件创建验证码指令。

我对angularjs比较陌生,似乎无法找到办法。基本上我想要一个验证码来验证一个人正在注册他们的帐户。调用element.realperson()将生成一个隐藏的输入字段,其中包含一些哈希值,我需要将其与服务器端输入的输入进行比较。

因此,如果我调用这个非常基本且不完整的指令,它会将newUser.captchaInput模型绑定到输入表单,但我不能为我的生活弄清楚如何获取隐藏字段值$('# captcha_hash')。val()并以某种方式将其包含在表单数据中。理想情况下为newUser.captchaHash。

angular.module('vah').directive("captcha", ->
  restrict: "A"
  require: '?ngModel'
  link: (scope, element, attrs, ngModel) ->
    return if !ngModel

    optionsObj = {
      length: 5
    }

  element.realperson(optionsObj)

  # need to bind $('#captcha_hash').val() to a newUser.captchaHash model, or 
  add the model to that generated input field.

)

<input captcha id="defaultReal" ng-model="newUser.captchaInput">

我确信这有一个简单的解决方案,并希望得到任何帮助。

2 个答案:

答案 0 :(得分:1)

如果您喜欢reCaptcha,可以尝试使用VividCortex/angular-recaptcha

答案 1 :(得分:0)

工作代码,感谢来自不同编程论坛的人的一些帮助。这绝对不是理想的,我有很多学习要做,但这很有效。

angular.module('vah').directive("captcha", ($timeout, $parse) ->
  restrict: "A"
  require: '?ngModel'
  link: (scope, element, attrs, ngModel) ->
    return if !ngModel

    optionsObj = {
      length: 5
    }

    $timeout(->
      attrs.foo = $('#captcha_hash')
      hashSet = $parse(attrs.ngModel).assign
      scope.$watch(attrs.foo.val(), (newVal) ->
        hashSet(scope, newVal)
      )
    , 300)
    element.realperson(optionsObj)

)

此外,我将包含用于散列此特定验证码的ruby代码,因为我遇到了Bignum和ruby的问题,而不是它在javascript或PHP / Java示例中所做的。

module CaptchaHashing
  module ClassMethods
    def rp_hash(value)
      hash_value = 5381
      value = value.upcase
      value.chars.each do |c|
        hash_value = ((left_shift_32(hash_value, 5)) + hash_value) + c.ord
        puts hash_value
      end
      hash_value
    end

    def left_shift_32 x, shift_amount
      shift_amount &= 0x1F
      x <<= shift_amount
      x &= 0xFFFFFFFF 

      if (x & (1<<31)).zero?
       x
      else
       x - 2**32
      end
    end

  end

  def self.included(receiver)
    receiver.extend ClassMethods
  end
end

def self.valid_captcha?(captcha_hash, captcha_input)
    if captcha_hash.present? && captcha_input.present?
      rp_hash(captcha_input) == captcha_hash
    else
      false
    end
  end
祝你好运!