在控制器之外访问 ng-model 数据 [英] Access ng-model data outside of the controller

问题描述

我写了下面的代码

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

我知道它在 ng-controller 之外，所以我无法绑定数据，但我的应用程序需要 calanderCtrl 控制器.我想将此值放入范围，以便我也可以在其他控制器中使用它.我该怎么做?

I know its outside of the ng-controller so i am not able to bind the data, but my application requires calanderCtrl controller. I want to put this value to scope so that i can use it inside other controllers also. How do i do this?

推荐答案

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

You could use a publish subscribe pattern for this. That way you avoid putting the variable on the 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;
   });
}

您的控制器将在您的模板加载时被调用.

Your controller will get called when your template loads.

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

现在它是如何工作的:

Angular 不共享作用域.每个控制器都有自己独立的作用域.所以为了让我们的子作用域保持最新，我们需要以某种方式抛出一个我们的孩子订阅的事件.这可以通过两种方式完成.

Angular does not share scopes. Each controller has its own seperate scope. So in order to keep our child scopes up to date we need to somehow throw an event on which our children subscribe to. This can be done in two ways.

$scope.$emit 或 $rootScope.$broadcast

两者之间的区别很微妙.

The difference between the two is subtle.

$scope.$emit 将事件向上链发送.因此，例如考虑这个范围层次结构.

$scope.$emit wil send the event up the chain. so for instance consider this scope hierarchy.

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

只有 scope1 会捕获事件.因为 $scope.$emit 上升到链上.这是一种仅更新特定范围的方法.虽然主要做的是这个.

only scope1 will catch the event. since $scope.$emit goes up the chain. this is a way to only update specific scopes. although what is mostly done is this.

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

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

we inject $rootScope in the controller of scope1 and scope3 and subscribe to the emit on the rootscope. Since the rootscope is the highest scope it will always catch the $emit from scope2. This is a way to only send the event to specific controllers wich subscribe on the rootscope.

最后我们也可以这样做:

lastly we can also do this:

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

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

we are now shouting on the rootscope and instead of moving up like emit, broadcast works down the chain. This is the equivalent of shouting in a room and everyone who doesnt have his ear protectors on will hear it. in essence everyone who subscribes on their local scope to the event that broadcast is sending

这篇关于在控制器之外访问 ng-model 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！