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

This topic created in 4271 days ago, the information mentioned may be changed or developed.

页面上dom值是改变了，使用a标签的ng-click之后死活取不到。
1.查了资料发现这样操作是禁止的，会导致view更新了，model还没更新。
2.发现需要使用directive 来让 DOM 的改变即时更新到 Model 里
3.求写法。单纯的input框到controller中取值问题。

Supplement 1 · Oct 10, 2014

具体是这样的。
构建一个简单的桌面应用程序。
然而为了使得更像C/S风格，
使用路由分发后，当用户点击在A页面“新增”按钮，便使用window.open来弹出一个增加信息的窗口（页面B）。
这样便不在同一个scop，因为涉及到部分用户信息，统一一个地方进行业务操作等情况，使用opener进行参数传递回A页面。
然后再触发点击A页面ng-click绑定的save()；

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

就是这么个情况。

DOM

取值

model

15 replies • 2014-10-10 18:38:42 +08:00

weiweiwitch

Oct 10, 2014

楼主真勤奋啊，6点多就在学习了。
把问题代码发出来看看，只看问题无法定位原因啊。

dom上的值一般会绑到scope上的一个值，这样ng-click时只需要获取scope上的值就行了。

leer561

Oct 10, 2014

angularjs一般最好不要用jquery来改变DOM吧，一般遇到的应该就是不是用angularjs 的事件导致的model更新，但是view没更新
一般使用$apply或者$setTimeout 来强制更新view

raptium

Oct 10, 2014

input 框到 controller 里取值，绑个 ng-model 不就好了嘛？

leer561

Oct 10, 2014

$timeout = =

zhouzm

Oct 10, 2014

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

Oct 10, 2014

@weiweiwitch @leer561 javascript 设置value 在view中看到确实更改了。但是model木有更改。如果我手动输入则可以取到值。
@raptium 已绑定
@zhouzm 我试试，angular 我其实用来做路由，和数据绑定（好吧，这边矛盾了）

leer561

Oct 10, 2014

@chigco 嗯，是我理解错误
不过稍微有些不明白，没怎么遇到过，我一般都是模拟窗口。
使用opener进行参数传递回A页面，这个参数不能直接给js解析了，然后赋值给model么？
我的理解是参数解析给了A页面model，然后model改变，再用$apply或者$setTimeout 强制更新view。提交再提交整个对象

rankjie

Oct 10, 2014

求求你们了，这样子写代码就别用angular了

chigco

Oct 10, 2014

@rankjie 确实刚接触angularJs 觉得这样写有点违背angularJs原本的意愿。看你的回复应该是很熟悉angularJs，能说下这样的场景（A页面open B页面填入一些信息后，回传A页面，连同A页面原本的一些信息一起提交到controller）angularJs该如何来写吗？

lerry

Oct 10, 2014

用angular就不要用jquery操作dom了

rankjie

Oct 10, 2014

@chigco

DOM必须封装个 directive
实在嫌麻烦要快速的解决办法，那就用URL参数传递数据最快了

chigco

Oct 10, 2014

@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

Oct 10, 2014

@chigco

不知道你整个DOM操作是怎么进行的；
你可以了解一下 $digest $apply

chigco

Oct 10, 2014

@rankjie 如果是你，你会怎么操作呢？（我直接$('#id').val('xx');）
你之前说的 “实在嫌麻烦要快速的解决办法，那就用URL参数传递数据最快了”，问题是，你url中的参数也需要设置给页面上的ng-model吧。如果用angular写法呢，怎么设置进去？

rankjie

Oct 10, 2014

@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');
```