angularjs - 如何在不使用 ng-controller 的情况下手动将 Controller 添加到 AngularJS 中的元素？

Question

我想做这样的事情:

bindACustomControllerToThisElement($('#putControllerHereWithoutDirective'), function($scope){
  $scope.title = "Hello World!";
});

您可能想知道，“为什么？？”出色地。它正在将遗留代码转换为有 Angular 的。还不能完全使用执行 AngularJS 的标准方法。

Answer 1

如果你想要的正是你在这里做的事情，那就是:

function bindACustomControllerToThisElement(elem,ctrlName,ctrl,deps){
  var name = elem.id || elem.attr && elem.attr('id') || false;
  if(!name) return false;
  angular.module(name,deps || []).directive('has'+ctrlName,function(){
    return {
      restrict:'C',
      controller: ctrlName
    };
  }).controller(ctrlName,ctrl);
  angular.bootstrap(elem,[name]);
}

//calling it...

var elem = document.getElementById('myAngularSection');

bindACustomControllerToThisElement(elem,'MyCtrl',function($scope){
    $scope.model = {
      message: 'Hello World'
    };
  }
);

plunker

尝试在此设置中共享数据可能会变得很复杂但是如果您在其他地方有命名空间数据，您只想绑定(bind)。我想这应该可行。