Question

我有两个DIV，每个都是一个独立的用户控件或部分视图，如果我想让一个团队在 dog div上工作，另一个团队在 fox上工作 div。每个团队都有自己的角度模块，控制器，视图等？如果是的话，你能给我看一个代码片段吗？

另一个问题：如果我想将这两个DIV松散耦合，那么让它们进行通信的最佳角度方式是什么？

<body ng-app>
  <div id="dog">
    <input type="text" ng-model="name"/> {{name}}
  </div>
  <div id="fox">

  </div>
</body>

谢谢！

对于其他新开发人员的参考，这是最终的代码，如果您有更好的解决方案，请随时改进它。

<body ng-app="airborneApp">
    <div id="dog" ng-controller="dogController">
        <input type="text" ng-model="name" /> {{name}}
    </div>
    <div id="fox" ng-controller="foxController">
        <input type="text" ng-model="name" /> {{name}}

    </div>

    <script>
        angular.module('airborneApp', ["dogCompany", "foxCompany"]);

        angular.module('dogCompany', []).
            controller('dogController', ['$scope', function ($scope) {
                $scope.name = 'hello dog';
            }]);

        angular.module('foxCompany', []).
            controller('foxController', ['$scope', function ($scope) {
                $scope.name = "hello fox";
            }]);

    </script>
</body>

Answer 1

每个div可以使用单独的控制器：

<div ng-controller="firstCtrl"></div>
<div ng-controller="secondCtrl"></div>

您问题的其他部分请参阅：

What's the correct way to communicate between controllers in AngularJS?

Answer 2

您可以制作尽可能多的模块，只需将所有模块作为主要App模块定义中的依赖项引用（并按正确顺序加载）

应用

angular.module('myApp', ['firstModule', 'secondModule'])

<强>模块

angular.module('firstModule', []) // empty array as a second parameter creates new module instead of using existing one .controller(...) .directive(...) angular.module('secondModule', []) .controller(...) .directive(...)

对于不同模块之间的通信，最简单的方法是将$rootScope注入所有控制器。

但首选方法是在主app模块中创建一个服务，该服务将注入到两个模块中

angular.module('myApp') .factory('SharedData', function() { var a = {}, b = {}; return { a: a, b: b } })

然后使用它

angular.module('firstModule') .controller('something', function($scope, SharedData) { SharedData.a.data = 'new data'; }) angular.module('secondModule') .controller('something else', function(SharedData) { console.log(SharedData.a.data); //will output 'new data' })

如何模块化角度代码？

2 个答案: