与其他控制器共享选定的选择

Share selected select with another controller

本文关键字：选择 共享 其他 控制器      更新时间：2023-09-26

我正试图与另一个控制器共享所选选项（并在选择新选项时更新它）。类似于控制器之间的双向数据绑定。

我尝试过建立一个像这样的工厂

.factory("shareObjective", function($scope){
     var shareObjective = {};
     return {
         shareObjective: shareObjective,
     };
})

然后我将其注入控制器，并将其绑定到select的模型上，就像一样

$scope.selectModel = shareObjective.shareObjective;

我似乎很难让它发挥作用。基本上，我只想与另一个控制器共享选定的选项（准确地说是.name），但我很难做到这一点。我的第一步是首先将其共享到工厂，但我似乎在尝试这一点时运气不佳。我应该使用类似$broadcast的东西来保持信息流的开放吗？谢谢

编辑-这里有一个plunkerhttp://plnkr.co/edit/L5lz4etQ7mUEhf9viNOk?p=preview

是的，这在默认情况下不起作用，因为您使用两个不同的作用域，因此ngModels不同。使用服务也没有帮助，因为即使在一个作用域中单击ngModel的select会在该作用域中触发摘要循环，在另一个作用区中也不会触发它。正如您自己所建议的那样，您需要以某种方式通知另一个作用域来更新自己，是的，您可以通过事件（$broadcast和$on）：

两个控制器都包含

<select
    ng-model="foo"
    ng-options="foo for foo in foos"
></select>

这就是JS:

var foos = [
    'foo1',
    'foo2',
    'foo3'
];
function MyCtrl($scope, $rootScope) {
    $scope.foo = foos[0];
    $scope.foos = foos;
    // detect broadcasts from other controllers and set our value to the one we received
    $rootScope.$on('foo-event', function(e, data) {
        $scope.foo = data;
    });
    // detect when foo changes and broadcast it's value
    $scope.$watch('foo', function() {
        $rootScope.$broadcast('foo-event', $scope.foo);
    });
}
myApp.controller('MyCtrl1', ['$scope', '$rootScope', MyCtrl]);
myApp.controller('MyCtrl2', ['$scope', '$rootScope', MyCtrl]);

这是小提琴。

请注意，我的代码没有使用单个控制器，而是使用单个控制器实现。您可以编写自己的MyCtrl1和Myctrl2实现，这两个实现都包含此代码。

此外，虽然这看起来会在$watch和$on之间生成一个无限循环，但事实并非如此。$scope.foo = data;不触发$watch，

相关文章：