使用按鈕點擊另一個控制器的值

-1

我有三個控制器，CTRL 1，CTRL 2和CTRL 3.我想傳遞值firstName到Ctrl 1，姓氏到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>

來源

2017-05-04 Akki

使用的服務。 –

嘗試此方法。

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。

希望它有幫助！

來源

2017-05-04 11:05:16

問題在您的代碼段：

該服務並不知道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>

來源

2017-05-04 11:11:40 Sajal

使用按鈕點擊另一個控制器的值

回答

相關問題