Javascript AngularJS如何重新编译动态加载的指令

我整个上午都在搞这个来隔离我的问题。当我的页面加载时，我按名称动态加载指令。现在，我希望能够基于

select

选项更改动态加载的指令

下面是指向我的Plunker的链接。它正确地加载了我需要的数据，但没有关闭指令。我猜我需要重新编译，但我不知道从哪里开始

以下是我代码的JavaScript部分：

  (function(angular) {
  'use strict';

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

  myAppModule.controller('myController', function($scope) {

    $scope.directives = [{
      id: 'my-directive1',
      label: 'My Directive1',
      data: 'Directive 1 data.'
    }, {
      id: 'my-directive2',
      label: 'My Directive 2',
      data: 'Directive 2 data.'
    }];

    $scope.selectedDirectiveId = $scope.directives[0].id;
    $scope.selectedDirectiveData = $scope.directives[0].data;

    $scope.selectChanged = function() {
      for (var i = 0, len = $scope.directives.length; i < len; i++) {
        if ($scope.directives[i].id == $scope.selectedDirectiveId) {
          $scope.selectedDirectiveId = $scope.directives[i].id;
          $scope.selectedDirectiveData = $scope.directives[i].data;
          break;
        }
      }
    };
  });

  myAppModule.directive('loaddirective', function($compile) {
    return {
      restrict: 'A',
      scope: {
        loaddirective: "=",
        directivedata: "="
      },
      link: function($scope, $element, $attr) {
        var value = $scope.loaddirective;
        if (value) {
          $element.html("<div " + value + " directivedata='directivedata'></div>");
          $compile($element.contents())($scope);
        }
      },
      controller: ['$scope',
        function($scope) {
        }
      ]
    };
  });

  myAppModule.directive('myDirective1', function() {
    return {
      templateUrl: 'my-directive1.html',
      scope: {
        directivedata: "="
      }
    };
  });

  myAppModule.directive('myDirective2', function() {
    return {
      templateUrl: 'my-directive2.html',
      scope: {
        directivedata: "="
      }
    };
  });

})(window.angular);

（函数（角度）{
"严格使用",；
var myAppModule=angular.module（'myApp'，[]）；
myAppModule.controller（'myController'，函数（$scope）{
$scope.directions=[{
id:“my-directive1”，
标签：“我的指令1”，
数据：“指令1数据。”
}, {
id:‘我的方向2’，
标签：“我的指令2”，
数据：“指令2数据。”
}];
$scope.selectedDirectiveId=$scope.directives[0].id；
$scope.selectedDirectiveData=$scope.directivedata[0]。数据；
$scope.selectChanged=函数（）{
对于（var i=0，len=$scope.directives.length；i

只需聆听更改并更新即可。

链接：函数（$scope、$element、$attr）{
log（'loaddirective链接'）；
var值=$scope.loaddirective；
函数更新（值）{
$element.html（“”）；
$compile（$element.contents（））（$scope）；
}
如果（值）{
更新（价值）；
}
$scope.$watch（'loaddirective'，更新）；
},

只需聆听更改并更新即可。

链接：函数（$scope、$element、$attr）{
log（'loaddirective链接'）；
var值=$scope.loaddirective；
函数更新（值）{
$element.html（“”）；
$compile（$element.contents（））（$scope）；
}
如果（值）{
更新（价值）；
}
$scope.$watch（'loaddirective'，更新）；
},

只需聆听更改并更新即可。

链接：函数（$scope、$element、$attr）{
log（'loaddirective链接'）；
var值=$scope.loaddirective；
函数更新（值）{
$element.html（“”）；
$compile（$element.contents（））（$scope）；
}
如果（值）{
更新（价值）；
}
$scope.$watch（'loaddirective'，更新）；
},

只需聆听更改并更新即可。

链接：函数（$scope、$element、$attr）{
log（'loaddirective链接'）；
var值=$scope.loaddirective；
函数更新（值）{
$element.html（“”）；
$compile（$element.contents（））（$scope）；
}
如果（值）{
更新（价值）；
}
$scope.$watch（'loaddirective'，更新）；
},

我认为您需要使用$scope。$watch收听值更新，然后更改布局我认为您需要使用$scope。$watch收听值更新，然后更改布局我认为您需要使用$scope。$watch收听值更新，然后更改布局我认为您需要使用$scope。$watch收听值更新，然后更改布局

  link: function($scope, $element, $attr) {
    console.log('loaddirective link');
    var value = $scope.loaddirective;

    function update (value) {
      $element.html("<div " + value + " directivedata='directivedata'></div>");
      $compile($element.contents())($scope);
    }
    if (value) {
      update (value);
    }
    $scope.$watch('loaddirective', update);
  },