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

Posted 2023-03-05

【中文标题】在 Angular js 中跨 2 个控制器选择的绑定值

【英文标题】：Binding value to select in angular js across 2 controllers

【发布时间】：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 = "";
);
  ;

])

【参考方案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