2017-06-15 4 views
1

Ich habe ein Problem, wenn ich Daten von Auswahleingang zwischen ControllernPassing Daten von Auswahleingang zwischen Controller inangular

I mit Eingang (Text oder ähnlichem), aber ich weiß nicht, mit Eingang tun kann wie wählt will vorbei, Kontrollkästchen und Radiobox ...

Wie kann ich die Auswahldaten im zweiten Controller bekommen?

Hier ist ein einfaches Beispiel

Dank!

var myApp = angular.module("myApp", []); 
 

 

 
myApp.controller("ExampleOneController", function($scope, NewsService) { 
 

 
    $scope.news = NewsService.news; 
 
}); 
 
myApp.controller("ExampleTwoController", function($scope, NewsService) { 
 

 
    $scope.news = NewsService.news; 
 
}); 
 

 
myApp.service("NewsService", function() { 
 
    return { 
 
    news: [{ 
 
     theme: "This is one new" 
 
    }, { 
 
     theme: "This is two new" 
 
    }, { 
 
     theme: "This is three new" 
 
    }] 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
    <div ng-controller="ExampleOneController"> 
 
    <h2> 
 
    ExampleOneController 
 
    </h2> 
 
    <select ng-options="item as item.theme for item in news track by item.theme" ng-model="data.singleSelect"></select> 
 
    singleSelect = {{data.singleSelect.theme}} 
 
    </div> 
 
    <div ng-controller="ExampleTwoController"> 
 
    <h2> 
 
    ExampleTwoController 
 
    </h2> 
 
    <h2> 
 
    singleSelect = {{data.singleSelect.theme}} 
 
    </h2> 
 
    </div> 
 
</body>

Antwort

0

So fand ich eine Lösung, hier kann ein einfaches Beispiel für Übergabe von Daten zwischen den Controllern sehen;)

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

 
myApp.service('myService', function(){ 
 
    this.selected = { 
 
     item: 'A' // I want this to return the currently selected value - If val is changed to 'B', update the text input accordingly. 
 
    } 
 
}); 
 
myApp.service('NewsService', function(){ 
 
    return { 
 
    news: [{ 
 
     theme: "This is one new" 
 
    }, { 
 
     theme: "This is two new" 
 
    }, { 
 
     theme: "This is three new" 
 
    }] 
 
    } 
 
}); 
 

 
myApp.controller('AController', ['$scope', 'myService','NewsService', function($scope, myService, NewsService){ 
 
    $scope.selected = myService.selected; 
 
    $scope.news = NewsService.news; 
 
}]); 
 

 
myApp.controller('BController', ['$scope', 'myService','NewsService', function($scope, myService,NewsService){ 
 
    $scope.mySelected = myService.selected; 
 
    $scope.myNews = NewsService.news; 
 
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 

 
<div ng-controller="AController"> 
 
<h1> 
 
controlador 1 
 
</h1> 
 
    <select name="" id="" ng-model="selected.item"> 
 
     <option value="A">Option A</option> 
 
     <option value="B">Option B</option> 
 
    </select> 
 
    <select ng-options="item as item.theme for item in news track by item.theme" ng-model="news.item"></select> 
 
</div> 
 
    
 
<div ng-controller="BController"> 
 
<h1> 
 
controlador 2 
 
</h1> 
 
    <input type="text" ng-model="mySelected.item"> 
 
    {{mySelected.item}} 
 
     {{myNews.item}} 
 
     {{myNews.item.theme}} 
 
     <br> 
 
     <select ng-options="item as item.theme for item in myNews track by item.theme" ng-model="myNews.item"></select> 
 
</div> 
 
    
 
</div>

0

von <div ng-controller="ExampleTwoController"> innerhalb <div ng-controller="ExampleOneController"> eingekapselt wird.

var myApp = angular.module("myApp", []); 
 
myApp.controller("ExampleOneController", function($scope, NewsService) { 
 
    $scope.news = NewsService.news; 
 
}); 
 
myApp.controller("ExampleTwoController", function($scope, NewsService) { 
 
    $scope.news = NewsService.news; 
 
}); 
 

 
myApp.service("NewsService", function() { 
 
    return { 
 
news: [{ 
 
    theme: "This is one new" 
 
}, { 
 
    theme: "This is two new" 
 
}, { 
 
    theme: "This is three new" 
 
}] 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
    
 
    <div ng-controller="ExampleOneController"> 
 
<h2>ExampleOneController</h2> 
 
<select ng-options="item as item.theme for item in news track by item.theme" ng-model="data.singleSelect"></select> 
 

 
singleSelect = {{data.singleSelect.theme}} 
 
    
 
<div ng-controller="ExampleTwoController"> 
 
\t <h2>ExampleTwoController</h2> 
 
\t <h2>singleSelect = {{data.singleSelect.theme}}</h2> 
 
</div> 
 

 
    </div> 
 
    
 
</body>

+0

Hallo, ja, es ist eine Lösung, aber ich brauche mit getrennten Controllern, zum Beispiel wenn ich zwei verschiedene Seiten habe;) –

+0

Dann ist dieser Ansatz nicht möglich. Verwenden Sie einen "Service", um Daten zwischen Controllern zu teilen. https://docs.angularjs.org/guide/services –

+0

Ich benutze einen Service;) Trotzdem habe ich eine Lösung gefunden, Danke! –

Verwandte Themen