Question

我想将一个html模板中的值传递给另一个。我有一个API来识别用户名和他的角色，我想发送用户名值。例如，这是我的代码来自名为"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视图：

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

我需要将thisUser传递给另一个文件，但不能正常工作。其他文件是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;
    }

    })();

它的html视图（detail.html）：

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

我读了一下，我知道我必须将数据从一侧绑定到另一侧，但我不知道该怎么做。我还在学习......

请帮帮我吗？

Answer 1

如果component是父子，则可以使用$ rootScope 所以在你 payment-component.js

$scope.thisUser = data.data.Response;

更改为

$rootScope.thisUser = data.data.Response;

你需要在payCtrl中添加$ rootScope，如下所示

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

正确使用绑定

1 个答案: