ボタンをクリックして別のコントローラからの値

-1

私は3つのコントローラ、ctrl 1、ctrl 2、ctrl 3を持っています。私はfirstNameの値をctrl1に、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>

出典

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は、第1および第2コントローラの$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

ボタンをクリックして別のコントローラからの値

答えて

関連する問題