Correct use of bindings

Question

I want to pass a value from one html template to another. I have an API which identifies the username and his role, and I want to send the username value. Per example, this is my code from a file called "payment-component.js":

(function(){
     'use strict';
    var payments = {
        templateUrl: './app/component-pay.html',
        controller: payCtrl
    };

    angular
    .module('payApp')
    .component('payThis', payments);
    payCtrl.$inject = ["$scope"];
    function payCtrl($scope){

    function users (){
        //$scope.userName;
        $http.get('api/UserRoleUser?sendUserValue=true')
        .then(function(data){
            $scope.thisUser = data.data.Response;            

        });
     }

}

})();

HTML view:

<div class="title">
   <h3><strong>Welcome, {{thisUser}}!</strong></h3>
</div>

I need to pass thisUser to another file but is not working. The other documents are detail-component.js:

(function(){
     'use strict';
    var home = {
        templateUrl: './app/component/detail-component/detail.html',
        controller: homeCtrl
    };

    angular
    .module('payApp')
    .component('home', home);

    function homeCtrl(){

        var home = this;
    }

    })();

And it html view (detail.html):

<div class="title">
  <h3><strong>This is your detail, {{userName}}!</strong></h3>
</div>

I'd read a little bit, and I know I have to bind the data from one side to another, but I don't know how to do that. I'm still learning...

Can you help me, please?

possible duplicate of https://stackoverflow.com/questions/34368222/angularjs-transfer-data-between-pages/34368875#34368875 — Mohammad Umair Khan, Nov 24 '17 at 06:09

score 1 · Accepted Answer · answered Nov 24 '17 at 05:51

1

You can use $rootScope if component is parent child So in you payment-component.js

$scope.thisUser = data.data.Response;

change to

$rootScope.thisUser = data.data.Response;

you need to add $rootScope in payCtrl like this

payCtrl.$inject = ["$scope","$rootScope"];

answered Nov 24 '17 at 05:51

bipin patel

2,061
1
13
22

Thanx. And, on the homeCtrl i just pass the value `{{userName}}`? or have also to declare $scope/$rootScope? – Chuck Villavicencio Nov 24 '17 at 19:52
Thanx again. I've found how to use it very well :) – Chuck Villavicencio Nov 25 '17 at 01:34

score 0 · Answer 2 · answered Nov 24 '17 at 05:51

0

Add 'payApp' module as dependency to 'pageoApp' module and get the 'thisUser' using a factory method (say getuser) instead of using controller. Add this getuser as dependency to your homeCtrl and try to access 'thisUser'

answered Nov 24 '17 at 05:51

Manikandan

13
3

Correct use of bindings

2 Answers2