Pass $scope along with $location.Path() in AngularJS

Question

I have two screens in my project, MemberList.HTML and EditMember.html. MemberList.HTML displays all members with Edit link for each member. When I click on Edit link, it calls the function ng-click="EditMember(member)" and code for EditMember(member) is

$scope.EditMember = function (member) {
    var getData1 = angularService.GetMember(member.ID);
    getData1.then(function (mem) {
        $scope.Member = mem.data;
        alert($scope.Member.FirstName);
        $location.path('/members/editmember');
    }, function (error)
        {
            alert('Error in getting Member record');
        }
    );
};

code for EditMember.Html

<div>
    <div class="bottom-margin">
        <div class="left-label">ID</div>
        <div><input type="text" name="txtID" id="txtID" ng-model="Member.ID"/></div>
    </div>
    <div class="bottom-margin">
        <div class="left-label">First Name</div>
        <div><input type="text" name="txtFirstName" ng-model="Member.FirstName"/></div>
    </div>
</div>        
<div>
    <div class="bottom-margin">
        <div class="left-label"><input type="button" name="btnCancel" value="Cancel" /></div>
        <div><input type="button" name="btnSave" value="Save" /></div>
    </div>
</div>

Route configuration is

 $routeProvider.when('/members/editmember',
        {
            templateUrl: '/Template/EditMember.html',
            controller: 'myCntrl'
        });

Now the problem is, in alert it is showing me the First Name but it is not displaying any data in EditMember.Html.

Everything is in same angular CONTROLLER, there is no different controller is used here.

How do I pass $scope with member data to EditMember.Html? What am I doing wrong?

use another controller call the service there on initalization of the controller — PavanAsTechie
– PavanAsTechie, Commented Jun 22, 2015 at 13:31
I think, when you call $location.path(), your controller is reloaded. Try to add reloadOnSearch: false to your route configuration. But in my opinion it makes no sense to change the location path if you work on the same controller. — akn
– akn, Commented Jun 22, 2015 at 13:40

glennanthonyb · Accepted Answer · 2015-06-22 13:40:33Z

5

Unlike services, controllers are not singletons in angular. When you changed the location, a new instance of that controller was created, and therefore a new scope.

Personally, I would pass a reference in the URL to the member you want to edit, e.g. /members/edit/1234, and load that data in when the controller loads, or during routing using $routerProvider resolve.

Personally, I would also consider using a different controller for editing vs viewing, and moving any shared functionality into services - just to keep things coherent.

answered Jun 22, 2015 at 13:40

glennanthonyb

1,8952 gold badges14 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dev · Accepted Answer · 2015-06-23 12:09:30Z

1

@glennanthonyb, I did something like this....I am using the same controller here.

In route, I have added

$routeProvider.when('/members/editmember/:ID',
        {
            templateUrl: '/Template/EditMember.html',
            controller: 'myCntrl'
        });

and in the Controller I have added $routeParams parameter

if ($routeParams.ID != null) {
        GetMember();
    }
    function GetMember() {
        var getData = angularService.GetMember($routeParams.ID);
        getData.then(function (mem) {
            $scope.Member = mem.data;
        }, function (error) {
            alert('Error in getting records');
        });
    }

In MemberList.Html instead of calling a function, I am using href

 <a href="/members/editmember/{{member.ID}}">Edit</a>

I am not sure if it is the right way to do it or not but it is working.

answered Jun 23, 2015 at 12:09

Dev

1372 gold badges3 silver badges10 bronze badges

1 Comment

glennanthonyb Over a year ago

Yes, something like this is good. You may experience a flicker of mustaches before the data has loaded, but you may have already handled this in the template using ng-if or ng-show. It's worth taking a look into $routeProvider resolve as a means to acquire data before the view loads, but use of this technique is down to the particular use case.

Collectives™ on Stack Overflow

Pass $scope along with $location.Path() in AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related