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

Question

我写了下面的代码

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

我知道它在 ng-controller 之外，所以我无法绑定数据，但我的应用程序需要 calanderCtrl 控制器。我想把这个值放在范围内，这样我也可以在其他控制器中使用它。我该怎么做？

Answer 1

您可以为此使用发布订阅模式。这样你就可以避免将变量放在根作用域上。

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 不共享作用域。每个控制器都有自己独立的范围。因此，为了使我们的 child 范围保持最新，我们需要以某种方式抛出我们的 children 订阅的事件。这可以通过两种方式完成。

$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

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

最后我们还可以这样做：

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

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

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

Access ng-model data outside of the controller

angularjs

angularjs-ng-model