javascript - AngularJS仪表板利用ng-include和他们自己的控制器

Question

我正在尝试使用它们自己的单独控制器从两个部分创建仪表板。

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

编辑 我仍然无法解决所有这些问题......所以我创建了一个我当前配置的 plunker，稍微修剪了一下。

http://plnkr.co/edit/uM7liZ74EmuD2zPkotHN

Answer 1

而不是使用ng-include，写一个指令。就像是：

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/MELkTcrllroHRY7zyh​​3H

---

更新

看看scope物业。我添加了两种（三种可能的）方式来与父范围进行交互。如需更好的解释，请查看上面api-link中的Directive Definition Object部分。

更新 2

不幸的是，plunker 并没有完全为我工作，但从我所见，我可以理解你的一些问题。我认为您仍在为控制器做很多工作。您应该提取在那里所做的大部分工作并将其投入服务。

这$scope.newOrderBy也确实打破了角度的想法。用过滤器替换它。然后在控制器中有很多$location.path，至少从我的角度来看是有问题的。查看本教程的第 7 步，了解如何做得更好（例如<a href="#/phones/{{phone.id}}">{{phone.name}}</a>）。

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

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

更新 3

承诺的笨蛋……终于

更新 4

另一个plunker展示了一种解决活动路由的方法，并将其注入到包含的指令中。