angular.js - jQuery sets input value Angularjs controller cannot get

Question

I know that this is against the Angularjs rules.
Let’s talk about the scene first.
The user clicks the "Add" button on page A, and window.open opens a page B. After filling in the information on page B, click save, and wants to echo it to page A. Then submit it to the controller together with some information on page A.
Because I am new to Angularjs, I still use page B opener.document.getElementById to set the parent page (the hidden input value of page A).
However, it appears that the input view on the page has changed, but the actual model has not changed at all, and the values ​​obtained in the controller are all undefined;
I would like to ask for advice
1. If it is written like this, how should it be done so that the controller can get the input value returned by the hidden B page.
2. If you follow the Angularjs writing method, how should it change?

Page A attached:

<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);

};

Page 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.