Question

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

这是我的代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

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

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

1 个答案: