Question

我低于要求。

我有三个控制器，ctrl 1，ctrl 2和ctrl 3.我想将值firstName传递给ctrl 1，lastName传递给ctrl2并使用按钮点击事件从ctrl3获取全名。

我已尝试过以下代码，但我的输出为NaN。请帮忙。

<script>
    var myApp = angular.module('myApp', []);


    myApp.factory('data', function () {

        var factory = {};
        var firstName = '';
        var secondName = '';
        factory.getName = function () {
            return firstName + ' ' + secondName;
        }
        return factory;
    });

    myApp.controller('FirstController', function ($scope, data) {
        $scope.firstName = data.firstName
    });

    myApp.controller('SecondController', function ($scope, data) {
        $scope.secondName = data.secondName;
    });
    myApp.controller('ThirdController', function ($scope, data) {
        $scope.getFullName = function () {
            $scope.fullName = data.getName();
        }
    });
</script>

    <h2>Controller 1</h2><br />
    <div ng-controller="FirstController">
        <input type="text" ng-model="data.firstName">
        <br>FirstName is : {{data.firstName}}
    </div>
    <hr>
    <h2>Controller 2</h2><br />
    <div ng-controller="SecondController">
        <input type="text" ng-model="data.secondName">
        <br>LastName is : {{data.secondName}}
    </div>
    <h2>Controller 3</h2><br />
    <div ng-controller="ThirdController">
        <button ng-click="getFullName()">Get full Name</button>
        Full name is: {{fullName}}
        </div>

</div>

Answer 1

尝试这种方法。

HTML：

<div ng-controller="BaseController">
    <p>Base Controller Value: {{model.getValue()}}</p>
    <button ng-click="model.updateValue('Value updated from Base')">Update In Base</button>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{model.getValue()}}</p>
        <button ng-click="model.updateValue('Value updated from Derived')">Update In Derived</button>
    </div>
</div>

JavaScript的：

app.factory('sharedModel', function () {
    // private stuff
    var model = {
        value: "initial Value"
    };
    // public API
    return {
        getValue:    function() { 
           return model.value; 
        },
        updateValue: function(value) {
           model.value = value;
        }
    };
});

function BaseController($scope, sharedModel) {
    $scope.model = sharedModel;
}

function DerivedController($scope, sharedModel) {
    $scope.model = sharedModel;
}

<强> WorkingFiddle

希望它有所帮助！

Answer 2

代码段中的问题：

该服务不了解firstName和secondName属性。
data不是第一个和第二个控制器中的$scope对象。
服务中的属性没有对象分配。 “保存”按钮绑定到服务。

var myApp = angular.module('myApp', []);


    myApp.service('data', function () {

        var service = {};
        service.firstName = '';
        service.secondName = '';
        service.getName = function () {
            return this.firstName + ' ' + this.secondName;
        }
        return service;
    });

    myApp.controller('FirstController', function ($scope, data) {
    
        $scope.saveToService = function() {
            data.firstName = $scope.firstName;
        }
        
    });

    myApp.controller('SecondController', function ($scope, data) {
        $scope.saveToService = function() {
          data.secondName =$scope.secondName;
        }
        
    });
    myApp.controller('ThirdController', function ($scope, data) {
        $scope.getFullName = function () {
            $scope.fullName = data.getName();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
    <h2>Controller 1</h2><br />
    <div ng-controller="FirstController">
        <input type="text" ng-model="firstName">
        <button ng-click="saveToService()">Save</button>
        <br>FirstName is : {{firstName}}
    </div>
    <hr>
    <h2>Controller 2</h2><br />
    <div ng-controller="SecondController">
        <input type="text" ng-model="secondName">
         <button ng-click="saveToService()">Save</button>
        <br>LastName is : {{secondName}}
    </div>
    <h2>Controller 3</h2><br />
    <div ng-controller="ThirdController">
        <button ng-click="getFullName()">Get full Name</button>
        Full name is: {{fullName}}
        </div>

</body>

使用按钮单击从另一个控制器的值

2 个答案: