javascript - 如何在 AngularJS 里对隐藏元素数据绑定？

Question

大概场景，比如有一个dropdown，当我选择下拉菜单的某个项后，Javascript会将一个type="hidden"或者display:none;的input标签的值设为某个值，同时绑定在input上的一个Angular $scope的值也相应改变。

我试过在input上绑定ng-model、或者设置value="{{oneScope}}"但是Angular scope的值始终不随之改变，似乎Angular的数据绑定是基于input标签上发生的某个Javascript事件进行数据更新的……

于是这种场景下应该如何实现才能触发数据更新呢？

Answer 1

最后解决的方法是在使用jQuery对input进行赋值的时候调用$scope.$apply()函数更新数据，实现如下：

AngularDropDown : (selector, event = 'click') ->
    $(selector).dropdown
        on: event
        onChange: (text, value) ->
            $("#{selector} .text").html value
            $("#{selector} input.angularData").val text
            # 在Angular外调取$scope
            scope = angular.element($("#{selector} input.angularData")).scope()
            # 更新数据
            scope.$apply () ->
                scope.registData.defaltContact = text

Answer 2

http://www.sapiensworks.com/blog/post/2013/06/22/Binding-AngularJs-Model-to-Hidden-Fields.aspx

---

应该在dropdown ng-change事件 去改变scope里的值