在控制器外部访问ng-model数据

一尘不染

在控制器外部访问ng-model数据

angularjs

我写了下面的代码

<span ng-controller="calanderCtrl">
<input type="text" ng-model="onDate">
</span>  
<pre>user.name = <span ng-bind="onDate"></span></pre>

我知道它在ng-
controller之外，因此我无法绑定数据，但是我的应用程序需要calanderCtrl控制器。我想将此值置于范围内，以便我也可以在其他控制器中使用它。我该怎么做呢？

阅读 226

2020-07-04

共1个答案

一尘不染

您可以为此使用发布订阅模式。这样，您避免将变量放在rootscope上。

function Ctrl($scope) {
    $scope.onDate = "12/01/2015";

    $scope.$watch('onDate', function(newValue, oldValue) {
     $scope.$emit('onDateChanged', newValue);
    });
 }

function Ctrl2($scope, $rootScope) {
   $scope.onDate = "";

   $rootScope.$on('onDateChanged', function(event, value) {
   $scope.onDate = value;
   });
}

模板加载时，控制器将被调用。

<span ng-controller="Ctrl">
<input type="text" ng-model="onDate">
</span>  
<pre>user.name = <span ng-controller="Ctrl2" ng-bind="onDate"></span></pre>

现在如何运作：

Angular不共享范围。每个控制器都有自己的单独作用域。因此，为了使我们的子级示波器保持最新状态，我们需要以某种方式引发一个我们的子级订阅的事件。这可以通过两种方式完成。

$scope.$emit 要么 $rootScope.$broadcast

两者之间的区别是微妙的。

$ scope。$ emit将事件发送到整个链。因此，例如考虑此范围层次结构。

rootscope
    scope1 ---> subscribes to the emit $scope.$on
      scope2 ---> performs a $scope.$emit
        scope3 ---> subscribes to the emit $scope.$on

只有scope1会捕获事件。从$ scope。$ emit开始。这是仅更新特定范围的一种方法。尽管主要是这样做的。

rootscope
        scope1 ---> subscribes to the emit $rootScope.$on
          scope2 ---> performs a $scope.$emit
            scope3 ---> subscribes to the emit $rootScope.$on

我们将$
rootScope注入scope1和scope3的控制器中，并订阅rootscope上的emit。由于rootscope是最高范围，因此它将始终从scope2捕获$
emit。这是一种仅将事件发送到在rootscope上进行订阅的特定控制器的方法。

最后，我们也可以这样做：

 rootscope
            scope1 ---> subscribes to the emit $scope.$on
              scope2 ---> performs a $rootScope.$broadcast
                scope3 ---> subscribes to the emit $scope.$on

现在，我们在rootscope上大喊大叫，而不是像发射一样向上移动，而是向下广播。这相当于在房间里大喊大叫，没有戴耳罩的每个人都会听到。本质上，每个在本地范围内订阅广播正在发送的事件的人

2020-07-04