Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

angularjs - Access ng-model data outside of the controller

I have written the below code

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

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

Now how does it work:

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 or $rootScope.$broadcast

The difference between the two is subtle.

$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

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

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...