Question

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

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

修改的我仍然在绕着所有这些缠绕我的头部时遇到一些麻烦....所以我创建了一个当前配置的plunker，稍微削减了一下。

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属性。我添加了两种（可能有3种）与父范围交互的方法。有关更好的解释，请查看上面api-link中的指令定义对象部分。

更新2

不幸的是，对于我来说，起诉者并不完整，但从我看到的情况来看，我可以理解你的一些问题。我觉得你还在为控制器做很多工作。你应该提取你在那里所做的大部分工作并将其投入服务。

同样$scope.newOrderBy真的打破了角度的想法。将其替换为filter。然后在控制器中有很多$location.path，至少在我看来是有问题的。请查看本教程的step 7，了解如何更好地完成此操作（例如<a href="#/phones/{{phone.id}}">{{phone.name}}</a>）。

然后，contractors和companies内部的路由如果您想将这些路由设置为信息中心，那么它就没有多大意义。

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

更新3

承诺的plunker ......终于

更新4

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

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

1 个答案: