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

2014-10-10 06:08:38 +08:00
 chigco
页面上dom值是改变了,使用a标签的ng-click之后死活取不到。
1.查了资料发现这样操作是禁止的,会导致view更新了,model还没更新。
2.发现需要使用directive 来让 DOM 的改变即时更新到 Model 里
3.求写法。单纯的input框到controller中取值问题。
8476 次点击
所在节点    问与答
15 条回复
weiweiwitch
2014-10-10 09:04:50 +08:00
楼主真勤奋啊,6点多就在学习了。
把问题代码发出来看看,只看问题无法定位原因啊。

dom上的值一般会绑到scope上的一个值,这样ng-click时只需要获取scope上的值就行了。
leer561
2014-10-10 09:05:57 +08:00
angularjs一般最好不要用jquery来改变DOM吧,一般 遇到的应该就是不是用angularjs 的事件导致的model更新,但是view没更新
一般使用$apply或者$setTimeout 来强制更新view
raptium
2014-10-10 09:08:10 +08:00
input 框到 controller 里取值,绑个 ng-model 不就好了嘛?
leer561
2014-10-10 09:08:28 +08:00
$timeout = =
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
2014-10-10 12:08:56 +08:00
@weiweiwitch @leer561 javascript 设置value 在view中看到确实更改了。但是model木有更改。如果我手动输入则可以取到值。
@raptium 已绑定
@zhouzm 我试试,angular 我其实用来做路由,和数据绑定(好吧,这边矛盾了)
leer561
2014-10-10 14:39:14 +08:00
@chigco 嗯,是我理解错误
不过稍微有些不明白,没怎么遇到过,我一般都是模拟窗口。
使用opener进行参数传递回A页面,这个参数不能直接给js解析了,然后赋值给model么?
我的理解是参数解析给了A页面model,然后model改变,再用$apply或者$setTimeout 强制更新view。提交再提交整个对象
rankjie
2014-10-10 16:02:54 +08:00
求求你们了,这样子写代码就别用angular了
chigco
2014-10-10 16:55:36 +08:00
@rankjie 确实刚接触angularJs 觉得这样写有点违背angularJs原本的意愿。看你的回复应该是很熟悉angularJs,能说下这样的场景(A页面open B页面填入一些信息后,回传A页面,连同A页面原本的一些信息一起提交到controller)angularJs该如何来写吗?
lerry
2014-10-10 16:56:53 +08:00
用angular就不要用jquery操作dom了
rankjie
2014-10-10 17:23:42 +08:00
@chigco

DOM必须封装个 directive
实在嫌麻烦要快速的解决办法,那就用URL参数传递数据最快了
chigco
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
2014-10-10 17:59:14 +08:00
@chigco

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/137931

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX