javascript - AngularJS 仪表板利用 ng-include 和自己的 Controller

Question

我正在尝试使用两个具有各自独立 Controller 的部分创建一个仪表板。

我使用 ng-include 来实现正确加载模板没有问题，我遇到的问题是将它们自己的 Controller 绑定(bind)到仪表板中，以便它们在同一仪表板页面上作为两个单独的模块运行。有人完成了这项任务，还是我只需要将子范围所需的所有内容复制到主仪表板范围中？

编辑我仍然无法理解所有这些......所以我创建了一个当前配置的插件，稍微 trim 了一下。

http://plnkr.co/edit/uM7liZ74EmuD2zPkotHN

Answer 1

而不是使用 ng-include ，写一个directive 。像这样的东西:

app.directive('moduleOne', function () {
  return {
    restrict: 'E',
    templateUrl: 'module-one.html',
    scope: {
      model: '=' // << two-way binding
    },
    link: function () {
      // post compile stuff
    },
    controller: ['$scope', '$timeout', function ($scope, $timeout) {
      // controller stuff
      $timeout(function () {
        $scope.model.text = 'change in model one';
      }, 4000);
    }]
  };
});

app.directive('moduleTwo', function () {
  return {
    restrict: 'E',
    templateUrl: 'module-two.html',
    scope: {
      string: '@attr' // << one-way binding
    },
    link: function () {
      // post compile stuff
    },
    controller: ['$scope', '$timeout', function ($scope, $timeout) {
      // controller stuff
      $timeout(function () {
        $scope.string = 'change in model two';
      }, 2000);
    }]
  };
});

演示:http://plnkr.co/edit/MELkTcrllroHRY7zyh3H

<小时/>

更新

看看scope属性(property)。我添加了两种(三种可能的)方式与父作用域交互。要获得更好的解释，请查看 api-link 中的指令定义对象部分。如上所述。

更新2

不幸的是，这个插件并不能完全为我工作，尽管从我所看到的，我可以理解你的一些问题。我认为你仍然在 Controller 中做很多工作。您应该提取在那里所做的大部分工作并将其放入服务中。

还有$scope.newOrderBy确实打破了 Angular 想法。将其替换为 filter 。然后有很多$location.path至少从我的 Angular 来看， Controller 中的内容是有问题的。看看step 7查看本教程，了解如何做得更好(例如 <a href="#/phones/{{phone.id}}">{{phone.name}}</a> )。

然后是 contractors 内部的路由和companies如果您想将它们作为小部件放入仪表板中，这没有多大意义。

我知道上面的内容可能没有多大帮助，尽管我会尝试添加另一个 plunker，以展示提到的一些想法。

更新3

promise 的plunker ...终于

更新4

另一个plunker显示一种解决事件路由问题的方法，并将其注入(inject)到包含的指令中。