在 Angular js 中跨 2 个控制器选择的绑定值答案

【问题标题】：Binding value to select in angular js across 2 controllers在 Angular js 中跨 2 个控制器选择的绑定值
【发布时间】：2015-07-16 06:23:54
【问题描述】：

使用 angularJS 我试图找出一种方法来绑定控制器 A 范围内的选择元素的值，以将其用作 ng-click 调用 [getQuizByCampID() Function] 范围内的参数控制器 B.

我的第一个想法是使用 jquery，但我在下面的链接中读到，从 angularJS 开始时不建议使用 jquery。

"Thinking in AngularJS" if I have a jQuery background?

我还在下面的链接中读到这是使用 ng-model 执行的，唯一的问题是提供的示例都在同一个控制器下。和Binding value to input in Angular JS

angularJS的什么方式将控制器A下的select元素的值拿到控制器B下的select中的函数调用中？

Price.html 视图

  <div class="col-sm-3" ng-controller="campCtrl"> **Controller A** 
       <select  id="selCampID" class="form-control" ng-model="campInput" >
            <option ng-repeat="camp in campaigns" value="{{camp.camp_id}}">{{camp.camp_name}}</option>  
        </select>
  </div>

   <div class="col-sm-3" ng-controller="quizCtrl">  **Controller B**
        <select   ng-click="getQuizByCampID($('#selCampID').val())" class="form-control" ng-model="quizInput">
             <option ng-controller="quizCtrl" ng-repeat="quiz in quizzesById" value="{{quiz.quiz_id}}">{{quiz.quiz_name}}</option>  
         </select>
    </div>

App.js

var app= angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/price', {templateUrl: 'partials/price.html', controller: 'priceCtrl'});
}]);

$routeProvider.when('/price', {templateUrl: 'partials/price.html', controller: 'priceCtrl'});

测验控制器

'use strict';

app.controller('quizCtrl', ['$scope','$http','loginService', function($scope,$http,loginService){
$scope.txt='Quiz';
$scope.logout=function(){
    loginService.logout();
}
getQuiz(); // Load all available campaigns 
function getQuiz(campID){  
    $http.post("js/ajax/getQuiz.php").success(function(data){
    $scope.quizzes = data;
    //console.log(data);
   });
};
  $scope.getQuizByCampID = function (campid) {
  alert(campid);
$http.post("js/ajax/getQuiz.php?campid="+campid).success(function(data){
    $scope.quizzesById = data;
    $scope.QuizInput = "";
  });
  };

    $scope.addQuiz = function (quizid, quizname, campid) { 
  console.log(quizid + quizname + campid);   
  $http.post("js/ajax/addQuiz.php?quizid="+quizid+"&quizname="+quizname+"&campid="+campid).success(function(data){

  getQuiz();
  $scope.QuizInput = "";
});
  };

}])

【问题讨论】：

标签： javascript jquery html ajax angularjs

【解决方案1】：

您应该将值存储在服务中。

示例：

app.factory('SharedService', function() {
  this.inputValue = null;

  this.setInputValue = function(value) {
    this.inputValue = value;
  }

  this.getInputValue = function() {
    return this.inputValue;
  }

  return this;
});

Example on Plunkr

阅读：AngularJS Docs on services

或查看Egghead.io video

【讨论】：

【解决方案2】：

您应该使用服务来存储值。

这是如何做到这一点的： Share data between AngularJS controllers

【讨论】：