访问另一个控制器上的控制器范围

debugcn 发表于 Dev

斯里克鲁什纳

我是角度的新手。我想首先访问另一个控制器范围我想知道这样做的简单方法和可用方法，提前谢谢

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        First Name: <input type="text" ng-model="fName"><br><br>
        Last Name : <input type="text" ng-model="lName">
        <p ng-bind="fullName()"></p>
    </div>
    <div ng-controller="mySecondCtrl">
        Father Name: <input type="text" ng-model="fathName"><br><br>
        Mother Name:<input type="text" ng-model="mothName">
        <p>
        <strong>Paren name:</strong>
        <span>Mr.{{fathName}},</span>
        <span>Ms.{{mothName}}</span>
        </p>
    </div>

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",[]);

        app.controller("myCtrl",myFunction);
        function myFunction($scope){
            $scope.fName = "";
            $scope.lName = "";
            $scope.fullName = function(){
                return $scope.fName +" "+ $scope.lName
            }
        }
        app.controller("mySecondCtrl",mySecondFunction);
        function mySecondFunction($scope){
            //I want to access the fullName() function here
        }
    </script>
</body>

尼泰什

您可以通过使用 Angular 服务进行数据传输来实现此目的。你需要设置你的方法myCtrl，$scope.fullName对数据传输服务。

现在该服务将您的方法保存在一个变量中。现在，从您的第二个控制器mySecondCtrl访问数据传输服务中的方法。

现在实际上您已经从第二个控制器调用了第一个控制器中的方法。这是工作示例。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<body ng-app="myApp">
    <div ng-controller="myCtrl">
        First Name:
        <input type="text" ng-model="fName">
        <br>
        <br> Last Name :
        <input type="text" ng-model="lName">
        <p ng-bind="fullName()"></p>
    </div>
    <div ng-controller="mySecondCtrl">
        Father Name:
        <input type="text" ng-model="fathName">
        <br>
        <br> Mother Name:
        <input type="text" ng-model="mothName">
        <p>
            <strong>Paren name:</strong>
            <span>Mr.{{fathName}},</span>
            <span>Ms.{{mothName}}</span>
        </p>
        <p><button ng-click="getDetails()">Get Details</button></p>
    </div>

    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.controller("myCtrl", myFunction);

        function myFunction($scope, DataTransfer) {
            $scope.fName = "";
            $scope.lName = "";
            $scope.fullName = function () {
                //console.log('fullname method called');
                return $scope.fName + " " + $scope.lName
            }
            //Setting the method to a data transfer service
            DataTransfer.setUserDetails($scope.fullName);
        }



        app.controller("mySecondCtrl", mySecondFunction);

        function mySecondFunction($scope, DataTransfer) {
            //I want to access the fullName() function here
            $scope.getDetails = function () {
                console.log('Going to call fullname method from second controller');
                //Reading the method in first controller inside the second one
                var functionItem = DataTransfer.getUserDetails();
                var details = functionItem();
                console.log(details);
            }
        }

        app.factory('DataTransfer', function () {

            var data = {};

            return {
                getUserDetails: function () {
                    return data;
                },
                setUserDetails: function (UserDetails) {
                    data = UserDetails;
                }
            };
        });
    </script>
</body>

</html>