V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
chigco
V2EX  ›  问与答

angularjs 使用 jq 操作 dom 即时更新 model 问题

  •  
  •   chigco · 2014-10-10 06:08:38 +08:00 · 8525 次点击
    这是一个创建于 3688 天前的主题,其中的信息可能已经有所发展或是发生改变。
    页面上dom值是改变了,使用a标签的ng-click之后死活取不到。
    1.查了资料发现这样操作是禁止的,会导致view更新了,model还没更新。
    2.发现需要使用directive 来让 DOM 的改变即时更新到 Model 里
    3.求写法。单纯的input框到controller中取值问题。
    第 1 条附言  ·  2014-10-10 12:05:55 +08:00
    具体是这样的。
    构建一个简单的桌面应用程序。
    然而为了使得更像C/S风格,
    使用路由分发后,当用户点击在A页面“新增”按钮,便使用window.open来弹出一个增加信息的窗口(页面B)。
    这样便不在同一个scop,因为涉及到部分用户信息,统一一个地方进行业务操作等情况,使用opener进行参数传递回A页面。
    然后再触发点击A页面ng-click绑定的save();

    而具体在B页面填完值后,A页面VIEW确实跟着改变。当使用JQ触发A页面绑定的save()的a标签进行提交,js中save事件触发了,值都是undefined。

    就是这么个情况。
    15 条回复    2014-10-10 18:38:42 +08:00
    weiweiwitch
        1
    weiweiwitch  
       2014-10-10 09:04:50 +08:00
    楼主真勤奋啊,6点多就在学习了。
    把问题代码发出来看看,只看问题无法定位原因啊。

    dom上的值一般会绑到scope上的一个值,这样ng-click时只需要获取scope上的值就行了。
    leer561
        2
    leer561  
       2014-10-10 09:05:57 +08:00
    angularjs一般最好不要用jquery来改变DOM吧,一般 遇到的应该就是不是用angularjs 的事件导致的model更新,但是view没更新
    一般使用$apply或者$setTimeout 来强制更新view
    raptium
        3
    raptium  
       2014-10-10 09:08:10 +08:00
    input 框到 controller 里取值,绑个 ng-model 不就好了嘛?
    leer561
        4
    leer561  
       2014-10-10 09:08:28 +08:00
    $timeout = =
    zhouzm
        5
    zhouzm  
       2014-10-10 09:14:37 +08:00
    angular 反对在 angular 之外更新 dom,如果一定要这样做(如果这么干,何必用 angular 呢):

    $('button').on('click', function(){
    var newVal = $(this).data('val');
    $('select').val(newVal).change();

    var scope = angular.element($("select")).scope();
    scope.$apply(function(){
    scope.selectValue = newVal;
    });
    });

    from:
    http://stackoverflow.com/questions/18113157/angularjs-scope-update-when-i-change-a-select-with-jquery
    chigco
        6
    chigco  
    OP
       2014-10-10 12:08:56 +08:00
    @weiweiwitch @leer561 javascript 设置value 在view中看到确实更改了。但是model木有更改。如果我手动输入则可以取到值。
    @raptium 已绑定
    @zhouzm 我试试,angular 我其实用来做路由,和数据绑定(好吧,这边矛盾了)
    leer561
        7
    leer561  
       2014-10-10 14:39:14 +08:00
    @chigco 嗯,是我理解错误
    不过稍微有些不明白,没怎么遇到过,我一般都是模拟窗口。
    使用opener进行参数传递回A页面,这个参数不能直接给js解析了,然后赋值给model么?
    我的理解是参数解析给了A页面model,然后model改变,再用$apply或者$setTimeout 强制更新view。提交再提交整个对象
    rankjie
        8
    rankjie  
       2014-10-10 16:02:54 +08:00
    求求你们了,这样子写代码就别用angular了
    chigco
        9
    chigco  
    OP
       2014-10-10 16:55:36 +08:00
    @rankjie 确实刚接触angularJs 觉得这样写有点违背angularJs原本的意愿。看你的回复应该是很熟悉angularJs,能说下这样的场景(A页面open B页面填入一些信息后,回传A页面,连同A页面原本的一些信息一起提交到controller)angularJs该如何来写吗?
    lerry
        10
    lerry  
       2014-10-10 16:56:53 +08:00
    用angular就不要用jquery操作dom了
    rankjie
        11
    rankjie  
       2014-10-10 17:23:42 +08:00
    @chigco

    DOM必须封装个 directive
    实在嫌麻烦要快速的解决办法,那就用URL参数传递数据最快了
    chigco
        12
    chigco  
    OP
       2014-10-10 17:47:52 +08:00
    @rankjie 我这样写都不行。还是必须手动点击input输入值才可以输出setViewValue;

    应该bind什么事件?如果是JQ setvalue;

    return {
    require:"ngModel",
    link:function (scope, ele, attrs, ctrl) {
    //view -> model
    ele.bind("change",function() {
    scope.$apply(function() {
    console.log("setViewValue" + ele.text());
    ctrl.$setViewValue(ele.text());
    });
    });
    }
    };
    rankjie
        13
    rankjie  
       2014-10-10 17:59:14 +08:00
    @chigco

    不知道你整个DOM操作是怎么进行的;
    你可以了解一下 $digest $apply
    chigco
        14
    chigco  
    OP
       2014-10-10 18:33:11 +08:00
    @rankjie 如果是你,你会怎么操作呢?(我直接$('#id').val('xx');)
    你之前说的 “实在嫌麻烦要快速的解决办法,那就用URL参数传递数据最快了”,问题是,你url中的参数也需要设置给页面上的ng-model吧。如果用angular写法呢,怎么设置进去?
    rankjie
        15
    rankjie  
       2014-10-10 18:38:42 +08:00
    @chigco

    具体我认为正确的做法描述起来好麻烦,要根据你具体的工程情况来做。

    URL参数通过 $location 获取,官方文档的例子:

    ```
    // given url http://example.com/#/some/path?foo=bar&baz=xoxo
    var searchObject = $location.search();
    // => {foo: 'bar', baz: 'xoxo'}


    // set foo to 'yipee'
    $location.search('foo', 'yipee');
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1464 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 17:29 · PVG 01:29 · LAX 09:29 · JFK 12:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.