如何共享以正确的方式在角应用控制器之间的数据 [英] How to share data between controllers in angular app in the right way

问题描述

唉，看来这不是关于这个问题的第一个问题，但是......

我知道，我们可以使用的服务或事件这一点，但也有它说，我们不应该使用的事件很多互联网上的许多文章。

我也知道，我们可以为此建立单独的服务，但在我看来，它也没那么好。如何看的数据的变化？如何通知SMTH已经改变？活动？再？...

和还怎么样这些变体的表现呢？

那么，其实什么是真正的好，也许，最好的办法，以角应用程序控制器之间的数据共享？此外，它是一个好主意，做这件事情？这是否意味着，我们有一些错误在我们的应用，一些建筑或概念上的问题？也许这气味未便？

请点我，并给予善意的提醒

在此先感谢

更新

这主要是常见的问题，因为有时我不得不这样做。我想知道这是一个好的，它是正确的具有角校长？

解决方案

使用范围继承的一种方式：

\r

\r

angular.module（应用，[]）\r
.RUN（['$ rootScope'，函数（$ rootScope）{\r
  $ rootScope.sharedObj = {搜索：''};\r
}]）\r
.controller（'navCtr'，['$范围'，函数（$范围）{\r
}]）\r
.controller（'routeCtr'，['$范围'，函数（$范围）{\r
  $范围。$表（sharedObj.search功能（D）{\r
    $ scope.data = D？ '搜索到的数据是'+ D：'';\r
  }）;\r
}]）;

\r

DIV。主要{\r
  显示：inline-block的;\r
  边框：1px的纯黑色;\r
  高度：100像素;\r
  垂直对齐：首位;\r
}\r
\r
。导航{\r
  宽度：20％\r
}\r
输入的.navigation {\r
  最大宽度：70％;\r
}\r
\r
{。第\r
  宽度：75％\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆LT; D​​IV NG-应用=应用程序类=主＆GT;\r
  ＆LT; D​​IV NG控制器=navCtr级=导航＆GT;\r
    搜索：＆LT; BR /＆GT;\r
    ＆LT;输入NG模型=sharedObj.search/＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT; D​​IV NG控制器=routeCtr级=页＆GT;\r
    {{数据}}\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

第二个方法是共享服务：

\r

\r

angular.module（应用，[]）\r
.factory（'srcObject'，[功能（）{\r
  返回{\r
    值：''\r
  }\r
}]）\r
.controller（'navCtr'，['$范围，srcObject'，函数（$范围，srcObject）{\r
  $ scope.search = srcObject;\r
}]）\r
.controller（'routeCtr'，['$范围，srcObject'，函数（$范围，srcObject）{\r
  $范围。$表（函数（）{返回srcObject.value}，功能（D）{\r
    $ scope.data = D？ '搜索到的数据是'+ D：'';\r
  }）;\r
}]）;

\r

DIV。主要{\r
  显示：inline-block的;\r
  边框：1px的纯黑色;\r
  高度：100像素;\r
  垂直对齐：首位;\r
}\r
\r
。导航{\r
  宽度：20％\r
}\r
输入的.navigation {\r
  最大宽度：70％;\r
}\r
\r
{。第\r
  宽度：75％\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆LT; D​​IV NG-应用=应用程序类=主＆GT;\r
  ＆LT; D​​IV NG控制器=navCtr级=导航＆GT;\r
    搜索：＆LT; BR /＆GT;\r
    ＆LT;输入NG模型=search.value/＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT; D​​IV NG控制器=routeCtr级=页＆GT;\r
    {{数据}}\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

Well, seems that this is not the first question about this subject, but...

I know that we can use service or events for this, but there are many posts on the internet which says that we should not use events a lot.

I also know that we can create separate service for this purpose, but in my opinion, its also not so good. How to "watch" for data changes? How to notify that smth has been changed? Events? Again?...

And also what about performance of each of these variants?

So, actually what is the real good and probably, the best way to share data between controllers in angular application? Moreover, is it a good idea to do this thing? Does it mean that we have something wrong in our application, some architectural or conceptual problems? Maybe this smells of smth?

Please point me and give a good advise

Thanks in advance

UPDATE

This is mostly common question, because sometimes I have to do this. And I want to know is it a good, is it correct with angular principals?

解决方案

One way is using scope inheritance:

angular.module('app', [])
.run(['$rootScope', function($rootScope){
  $rootScope.sharedObj = {search:''};
}])
.controller('navCtr',['$scope',function($scope){
}])
.controller('routeCtr',['$scope',function($scope){
  $scope.$watch("sharedObj.search",function(d){
    $scope.data = d ? 'Searched data is ' + d : '';
  });
}]);

.main div{
  display:inline-block;
  border:1px solid black;
  height:100px;
  vertical-align: top;
}

.navigation{
  width: 20%
}
.navigation input{
  max-width: 70%;
}

.page {
  width: 75%
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" class="main">
  <div ng-controller="navCtr" class="navigation">
    search: <br/>
    <input ng-model="sharedObj.search"/>
  </div>
  <div ng-controller="routeCtr" class="page">
    {{data}}
  </div>
</div>

the second way would be a shared service:

angular.module('app', [])
.factory('srcObject',[function(){
  return {
    value: ''
  }
}])
.controller('navCtr',['$scope', 'srcObject', function($scope, srcObject){
  $scope.search = srcObject;
}])
.controller('routeCtr',['$scope', 'srcObject', function($scope, srcObject){
  $scope.$watch(function(){return srcObject.value},function(d){
    $scope.data = d ? 'Searched data is ' + d : '';
  });
}]);

.main div{
  display:inline-block;
  border:1px solid black;
  height:100px;
  vertical-align: top;
}

.navigation{
  width: 20%
}
.navigation input{
  max-width: 70%;
}

.page {
  width: 75%
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" class="main">
  <div ng-controller="navCtr" class="navigation">
    search: <br/>
    <input ng-model="search.value"/>
  </div>
  <div ng-controller="routeCtr" class="page">
    {{data}}
  </div>
</div>

这篇关于如何共享以正确的方式在角应用控制器之间的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！