将动态控制器分配给编译方法内的指令

Question

我有一种情况，我想动态地将控制器分配给一个指令，但我不能将它作为参数传递。

这是我的代码

var app = angular.module('app', []);

app.controller('home', function($scope, $timeout) {
  $scope.name = 'wow';
  $timeout(function() {
    console.log('changed');
    $scope.name = 'wowowow';
  }, 2000);
});


app.directive('modalBox', function($compile) {
  return {
    restrict: 'AE',
    replace: true,
    transclude: true,
    compile: function() {
      return {
        pre: function($scope, $elem, $attr) {
          $elem.attr('ng-controller', 'home');
          $compile($elem.contents())($scope);
        },
        post: function($scope, $elem, $attr, controller) {
          console.log($scope);
        }
      }
    },
    template: '<div><input type="text" ng-model="name"/>{{name}}</div>'
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">

  <div modal-box></div>

</div>

我知道我可以将控制器作为参数传递给指令，并且可以简单地将其称为控制器属性，但我不能这样做，因为在我的实际情况下，控制器名称将由服务决定我会将该服务注入指令以获取控制器名称。

简而言之，我需要一些方法将控制器分配给编译方法中的指令。

Answer 1

您正在将 ng-controller 属性添加到 $elem，它提供以下内容：

<div modal-box="" class="ng-binding" ng-controller="home">
  <input type="text" ng-model="name" class="ng-pristine ng-untouched ng-valid">
</div>

然后您正在编译 $elem.contents()，其中不包含 ng-controller 属性：

<input type="text" ng-model="name" class="ng-pristine ng-untouched ng-valid">

要么将属性添加到输入中，要么编译整个 div。

注意编译前需要去掉指令否则会死循环：

$elem.attr('ng-controller', 'home');
$elem.removeAttr('modal-box');
$compile($elem)($scope);

演示： http://plnkr.co/edit/A8wNkg6kD3dLByF2eyy2?p=preview

将动态控制器分配给编译方法内的指令

Assigning Dynamic controller to directive inside compile method

angularjs

angularjs-directive