Click here to Skip to main content
15,923,142 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am using AngularJs with .net Core MVC Application. In page I am opening Partial View and Bootstrap modal in which Angular is not used and sending value to Main view.

But the value is not reflecting in UI unless next action. so I need to do $scope.$apply forcefully. Which causes issue of apply in progress exception.


So every time i need to make $scope.$apply to reflect changes in UI. Below is my Code of Angular Controller

What I have tried:

var module = angular.module("myApp", [])
        module.controller("myController", function ($scope,$http) {
            $scope.RoleCod = '';
            $scope.RoleId = '';
            $scope.RoleDescription = '';
            $scope.CatDescription = '';
            $scope.CatCode = '';
            $scope.AvailableForms = [];
            $scope.SelectedForms = [];

            $scope.SearchRole = () => {
                var url = "/ApplicationSecurity/RoleCategory/LOVRole";
                var data = "";
                OpenModal(url, data);
            };

            SelectRole = (roleId, roleCode, roleDescription) => {
                $scope.RoleCode = roleCode;
                $scope.RoleId = roleId;
                $scope.RoleDescription = roleDescription;
                $scope.CatDescription = '';
                $scope.CatCode = '';
                $scope.AvailableForms = [];
                $scope.SelectedForms = [];
                $("#tblSelected > tbody").html("");
                $("#ValidationRoleDescription").addClass('hidden');
                $("#ValidationRoleCode").addClass('hidden');
                $('#myModal').modal('hide');
                $scope.$apply();
            }

            $scope.SearchCategory = () => {
                if ($scope.RoleCode == undefined || $scope.RoleCode == '') {
                    $("#ValidationRoleDescription").removeClass('hidden');
                    $("#ValidationRoleCode").removeClass('hidden');
                    return;
                } else {
                    $("#ValidationRoleDescription").addClass('hidden');
                    $("#ValidationRoleCode").addClass('hidden');
                }
                var url = "/ApplicationSecurity/RoleCategory/LOVRoleCategory";
                var data = { roleId: $scope.RoleId };
                OpenModal(url, data);
            };

            SelectCategory = function (categoryCode, categoryDescription) {
                $scope.CatDescription = categoryDescription;
                $scope.CatCode = categoryCode;
                $scope.AvailableForms = [];
                $('#myModal').modal('hide');
                $scope.$apply();
            }

            $scope.GetCatForms = () => {
                $.getJSON('@Url.Action("GetCategoryForms", "Form" , "ApplicationSecurity")',{ catCode: $scope.CatCode, formMode: $("#cmbFormMode").val() } , function (data) {
                    console.log(data);
                    $scope.AvailableForms = data;
                    console.log($scope.AvailableForms);
                    $scope.$apply();
                });
            };

            $scope.AddForm = (form) => {
                var array = $scope.SelectedForms.slice(0);
                array.push({
                    CatDescription: $scope.CatDescription,
                    FormDescription: form.formDescription,
                    CatCode: $scope.CatCode,
                    FormId: form.formId,
                    AddFlag: form.addFlag,
                    UpdateFlag: form.updateFlag,
                    DeleteFlag: form.deleteFlag,
                    Visible: true
                });
                $scope.SelectedForms = array;
                $scope.$apply(); // This causes error
            };
        });
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900