实例化自定义角度控制器

Question

How to instantiate a custom controller from code and preserve scope inheritance. In other words I want to do something like this:

var controller = 'myCtrl';
var html = '<p>{{value}}</p>';
var validScope= $scope.$new({
    value : 'Hello, custom controllers'
}); // Or something like this to get valid scopes inheritance
$(document.body).append(instantiate(controller, html, validScope));

So i need two answers: how to instantiate custom controller and how to do it like angular do.

UPD . I've tried do it this way:

$compile('<div ng-controller="myCtrl">'+html+'</div>')(validScope);

Controller was instantiated. But placeholded values was not binded.

Answer 1

I think that the best approach is to expose a function on the scope for retrieving your controller. ( ngController can take a string or a function) Lets say you have different values which need different constructors... something vaguely like this:

<div ng-repeat="item in items">
  <div ng-controller="controllerFor(item)">
    // whatever
  </div>
</div>

That controllerFor function will know how to do the mapping for you. Hopefully, you can avoid using $compile all together.

Answer 2

I do not know the context of where you are trying to all this controller from but I am going to assume you are wither in another controller, a service, or a directive.

The code below will show how to create a controller from a service. The example may cover more than what you would need to do but this is a pattern that will work.

Create an abstract controller, this sets the constructor parameters of the controller and insulates the rest of the dependencies.

module.factory('AbstractCtrl', ['dependencies...', function (dependencies...) {
    var ctrl = function($scope) {
           // Do controller setup.
    };

    return ctrl;
}]);

Now create a controller implementation based on the abstract

module.controller('CtrlImpl', ['$scope', 'AbstractCtrl', function ($scope, AbstractCtrl) {
    // Initialize the parent controller and extend it.
    var AbstractCtrlInstance = new AbstractCtrl($scope);
    $.extend(this, AbstractCtrlInstance);
    // … Additional extensions to create a mixin.
}]);

Now that you have a controller with a minimally defined constructor to create an instance of the controller you just need to call inject the $controller and do the following:

$controller('CtrlImpl', {$scope: $scope}));