Question

当我想在控制器之间传递选择输入数据

时，我遇到了问题

我可以使用输入（文本或类似），但我不知道输入，如选择，复选框和电台盒......

如何在第二个控制器中获取选择数据？

这是一个简单的例子

谢谢！

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>

Answer 1

将<div ng-controller="ExampleTwoController">封装在<div ng-controller="ExampleOneController">内。

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">
	<h2>ExampleTwoController</h2>
	<h2>singleSelect = {{data.singleSelect.theme}}</h2>
</div>

  </div>
  
</body>

Answer 2

所以，我找到了一个解决方案，这里可以看到一个在控制器之间传递数据的简单例子;）

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>

在控制器之间传递选择输入数据

2 个答案: