Question

我正在尝试在控制器之间连接一些功能。基本上我想根据在不同控制器中选择的无线电来隐藏/显示div。

在一点点帮助下，我设法让这个工作部分顺利进行。这是我到目前为止所拥有的。

我建立了一个工厂来桥接2个控制器之间的通信，我在ng-change上触发更新功能，用新的所需控件更新字符串。

.factory("sessionCheck", function() {
    var sessionCheck = {};
    var update = function (index) {
        console.log(index);
        sessionCheck = index; 
        return sessionCheck;
    };
    return { update: update }

因此，第一个控制器将在无线电上发生ng-change时调用该函数，如下所示：

//bring in session check, (injected above)
$scope.updateChecker = sessionCheck;

$scope.sessionChange = function(){
    $scope.updateChecker.update($scope.opMeasure);
};

因此，如果我console.log工厂的更改函数中的索引，这可以正常工作。因此，我正在努力将这些信息提取到另一个控制器并将其用于ng-hide（或显示）div。

如果在触发ng-change之前返回默认值“1”，那也很酷。如果有一种更简单的方法直接读取无线电的模型（opMeasure）而不是发射无线电的ng-change，那就更好了。

几个小时一直在努力，任何帮助都会非常感激。谢谢！

Answer 1

我昨天回答了类似的 question 。您可以通过使用公共服务在控制器之间共享公共数据对象引用来完成此操作。

<强> DEMO

的 JAVASCRIPT

angular.module('demo', [])

  .factory('SessionCheck', function() {
    var sessionCheck = {
      data: {}
    };

    // default value
    sessionCheck.data.selection = 1;

    return sessionCheck;
  })

  .controller('Ctrl1', function($scope, SessionCheck) {
    $scope.data = SessionCheck.data;
  })

  .controller('Ctrl2', function($scope, SessionCheck) {
    $scope.data = SessionCheck.data;
  });

HTML 的

<div ng-controller="Ctrl1">
  <h1>Controller 1</h1>
  Measurement:
  <select ng-model="data.selection">
    <option value="">-- Select</option>
    <option value="1">1 Meter</option>
    <option value="2">2 Meters</option>
    <option value="3">3 Meters</option>
  </select>
</div>

<div ng-controller="Ctrl2">
  <h1>Controller 2</h1>
  <div ng-show="data.selection == 1">
    1 Meter items
  </div>

  <div ng-show="data.selection == 2">
    2 Meter items
  </div>

  <div ng-show="data.selection == 3">
    3 Meter items
  </div>
</div>

让一个控制器中的无线电隐藏/显示另一个控制器中的元素

1 个答案: