AngularJS dashboard utilizing ng-include with their own controllers

Question

I am attempting to create a dashboard out of two partials with their own separate controllers.

I have no issue utilizing ng-include to achieve getting the templates loaded correctly, the issue I am running into is tying their own controllers into the dashboard so they operate as two separate modules on the same dashboard page. Has anyone accomplished this task, or do I just need to have everything required of the sub-scopes copied into the main dashboard scope?

EDIT I am still having some trouble wrapping my head around all of this.... so I created a plunker of my currentish config, trimmed down slightly.

http://plnkr.co/edit/uM7liZ74EmuD2zPkotHN

Answer 1

Instead of using ng-include , write a directive . Something like:

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);
    }]
  };
});

demo: http://plnkr.co/edit/MELkTcrllroHRY7zyh3H

---

update

Have a look at the scope property. I added two (of 3 possible) ways to interact with the parent-scope. For a better explanation have a look at the Directive Definition Object section from the api-link above.

update 2

Unfortunately the plunker is not completey working for me, though from what I see, I can understand some of your problems. I think you're still doing way to much work in you the controllers. You should extract much of what you do there and put it into services.

Also the $scope.newOrderBy is really breaking the idea of angular. Replace that with a filter . Then having a lot of $location.path in the controller is, at least from my point of view, problematic. Have a look at step 7 of the tutorial to get a hint of how this could be done better (eg <a href="#/phones/{{phone.id}}">{{phone.name}}</a> ).

Then there is the routing inside both contractors and companies which does not make much sense, if you want to place those as widgets into a dashboard.

I understand that the above might not be much of help, though I'll try to add another plunker, to show some of the ideas mentioned.

Update 3

the promised plunker ...finally

Update 4

another plunker showing one way to resolve something for the active route, and injecting it into an included directive.