在两个控制器之间选择角度js的绑定值

Working with angularJS I am trying to figure out a way to bind the value of a select element under the scope of controller A to use it as an argument for an ng-click call [getQuizByCampID() Function] under the scope of controller B.

在使用angularJS时，我试图找到一种方法，将select元素的值绑定到控制器a的范围内，将其用作控制器B范围内的ng-click调用[getQuizByCampID()函数]的参数。

My first idea was to use jquery, but I have read in the link below that using jquery is not recommended when starting with angularJS.

我的第一个想法是使用jquery，但是我在下面的链接中读到，在使用angularJS时不推荐使用jquery。

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

“用AngularJS思考”如果我有jQuery背景?

I also read in the link below that this is performed using ng-model, the only problem is that that the example provided is all under the same controller. and Binding value to input in Angular JS

我还在下面的链接中看到这是使用ng-model执行的，惟一的问题是所提供的示例都在同一个控制器下。和角JS中输入的结合值

What is the angularJS way to get the value of the select element under controller A into the function call in the select under controller B?

将控制器A下的select元素的值获取到控制器B下的select函数调用的方法是什么?

Price.html view

  <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'});

Quiz Controller

'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 = "";
});
  };

}])

2 个解决方案

#1

You should store the value in a service.

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

example:

例子:

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

例子Plunkr

Read: AngularJS Docs on services

请阅读:AngularJS Docs on services

or check this Egghead.io video

或检查这个书呆子。io视频

#2

You should use service to store the value.

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

This is how to do that: Share data between AngularJS controllers

这是如何做到的:在AngularJS控制器之间共享数据

#1