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

时间:2015-07-31 11:07:55

标签: angularjs angularjs-ng-model

我写了以下代码

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

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

1 个答案:

答案 0 :(得分:3)

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

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 wil将事件发送到链上。例如,考虑这个范围层次结构。

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。由于根镜是最高范围,因此它总是从scope2捕获$ emit。这是一种仅将事件发送到在rootscope上订阅的特定控制器的方法。

最后我们也可以这样做:

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

我们现在正在对内窥镜大喊大叫,而不是像发射一样向上移动,广播在链中起作用。这相当于在一个房间里大喊大叫,每个没有佩戴护耳器的人都会听到它。实质上每个人都在本地范围内订阅广播正在发送的事件