angular.js - jQuery设置input value Angularjs controller 无法获取

Question

我知道这样做是有违背Angularjs规定的写法的。
先说说场景吧。
用户在A页面点击“新增”按钮，window.open出一个B页面，在B页面填完信息后，点击保存，想要回显到A页面。然后连同A页面一些信息进行提交到controller.
因为刚接触Angularjs，所以还是以页面B opener.document.getElementById 设置父页面（A页面隐藏的input值）。
但是却出现页面上input view是改变了，但是实际的model根本没有变化，controller中取到的值都是 undefined ；
想请教下
1.如果这样的写法，应该怎么操作才能使得controller中可以取到隐藏的B页面回传的input的值。
2.如果遵循Angularjs写法，应该怎么变化？

附A页面：

<a href="javascript:void(0);" ng-click="add()" >新增</a>
<input id = "abv" ng-model="abv" class="intxt" type="text">
<a href="javascript:void(0);" ng-click="save()" id = "save">保存</a>

A.js:

$scope.add = function(){
    var openCustomer =  window.open('B.html');

};
$scope.save = function(){
    console.log('save ' + $scope.abv);

};

页面B：

this.opener.document.getElementById("abv").value = document.getElementById("a").value;
this.opener.document.getElementById("save").click();

Answer 1

You only need to modify the input and then add an event using JQ
$("#cert_valid_from").val(date1).trigger('change');
Mainly trigger simulation triggers the change event

Answer 2

Reference code

A.js:

$scope.add = function() {
        var openCustomer = window.open('B.html');

};

// 这里不用$scope而用window是为了在B页面调用
window.save = function(value) {
    $scope.abv = value;

    alert($scope.abv);
};

B page

//这里直接调用刚才A.js声明的save方法，然后把B页面的值传进去
opener.save(document.getElementById('a').value);
window.close();

Now you can alert what you need$scope.abv in A.js.

But it should still be noted that this approach is completely a workaround and is strongly not recommended

Answer 3

The reason is that I plan to use a chrome plug-in to make a plug-in that automatically helps me click buttons and input things. However, the project is made with Angular. Setting the input value using js is not enough. I have to update the model value, which costs a lot of money. It took me a while to figure out that input should be triggered instead of change, and then I spent a lot of time solving the problem of cross-frame operations. . . .
Damn, it took me a long time to find the answer. I really worked hard to find the answer. I was exhausted.
I finally got it. To sum up: after js modifies the input value, an event must be triggered. At first I thought it was change. , but after a lot of hard work, I finally found that input, $('input').val(123).trigger('input') was ok,
However, my project is more complicated, a.html is referenced through iframe Both html of b.html have a set of jquery and angular, so you need to use jquery of b.html to trigger the input (it may be a bug), that is, window.frames["f1"].contentWindow.$('input' ).val('55555555555').trigger('input') instead of
$('input',window.frames["f1"].contentWindow.document).val('55555555555').trigger('input' )

Answer 4

ngModel value is not updated/displayed
Reference http://www.cnblogs.com/whitewolf/p/ngmodel-zhi-bu-geng-xin-slash-xian-shi.html

Reasons
1. The model value does not meet the form validation conditions, so angular will not render it
2. Due to JavaScript’s special prototype chain inheritance mechanism, the assignment of attributes in $scope cannot be updated to the parent $scope

Quick solution for reason 2: Add "." to the attribute value of ngModel, then the JavaScript prototype chain retrieval will be started.