Gọi hàm bên trong scope từ javascript với angular

Ví dụ gọi hàm bên trong scope từ javascript với angular

1. Page cha gọi page con, từ page con cần gọi 1 hàm bên trong angular của page cha.
2. Chức năng angular.element
3. Page con gọi 1 hàm từ page cha
4. Page cha gọi page con, từ page con lấy dữ liệu của page cha

(1) Page cha gọi page con, từ page con cần gọi 1 hàm bên trong angular của page cha.

Cách 1. Thêm hàm javascript riêng từ page cha

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl" id="divID">

    Ví dụ gọi hàm trong scope Angular từ JAVASCRIPT

    <hr />

    <span onclick="OnSuccessData()">Click Me CALL</span>

</div>

<script>

function OnSuccessData() {

    angular.element(document.getElementById('divID')).scope().TestAngularMethod('IIF');

    angular.element(document.getElementById('divID')).scope().HoTen="VAN BINH";

    // Nếu gọi từ cửa sổ cha thì thêm

    //window.parent.angular.element(window.parent.document.getElementById('divID'))....

    //  window.parent.IIF_f_Close_Popup(); // đóng cửa sổ nếu dùng app iif

}

///

var app = angular.module("myApp",  []);

app.controller('myCtrl', ["$scope", function ($scope) {

    $scope.HoTen="A";

    $scope.TestAngularMethod = function (x) {

        alert('Hello:'+x);

    }

}]);

</script>

Từ page con gọi hàm javascrip từ page cha đã có: window.parent.OnSuccessData()

(2)  Chức năng angular.element

angular.element(document.getElementById('divID'))

Ví dụ sau khi render html từ angular, muốn thay đổi ngược lại giá trị bên trong html mà angular render ra.

   var obj=angular.element($(".table-basic"));  
        // alert( obj.find("td").html() ); // in ra html
   obj.find("td").html('Vi du HTML thay doi');
 

(3) Page con gọi 1 hàm từ page cha

Tại page con viết:

 $scope.ChonVaoNhom = function(x)

  {

           window.parent.angular.element(window.parent.document.getElementById('mainIIF_angu')).scope().call_frm_parent_SelectClick(x);

      window.parent.IIF_f_Close_Popup(); // đóng page con (page popup)

  }

- Tại page cha viết

$scope.call_frm_parent_SelectClick = function (vl) {



         $interval(function () {

            $scope.timsp_theo_chon=$scope.timsp_theo[2];

            $scope.timkiem_SanPham=vl;

             $scope.loadData_SanPham_V2(vl);

             $scope.SuaSanPham_DemSoSPChon_V=0;

          }, 100,1);

};

 

  Nếu lỗi gọi thêm lệnh
 

<input id="Button1" class="Button1" onclick="callAngularFun()" type="button" value="button" />
<script>
function callAngularFun()
{
   
    angular.element(document.getElementById('myApp')).scope().loadData_ChungTu_btLoad();
}
</script>
$scope.loadData_ChungTu_btLoad = function () {
   
           $interval(function () {
               $scope.loadData_ChungTu_LoadFrm();
          }, 100,1);
   }
$scope.loadData_ChungTu_btLoad = function () {
 // code....

}

(4)  Page cha gọi page con, từ page con lấy dữ liệu của page cha

Từ page cha có hàm lấy json
 $scope.get__DATA_Select = function () {
        var rt = $scope.sanpham.filter
        (
            obj => obj._sys_S==true
        );
       return rt;
    } //get__DATA_Select

Từ page con lấy dữ liệu này
  var data= window.parent.angular.element( window.parent.document.getElementById('mainIIF_angu')).scope().get__DATA_Select() ;
        alert(data.length);
       alert( JSON.stringify(data)  );

  // mainIIF_angu là ID div bên page cha
 

Tham khảo thêm:

https://embed.plnkr.co/dYuLXQAsA0GE5cQj33AX/

Bạn này gặp lỗi liên hệ mình giải quyết nha.