Angularjs 动态 html 字符串编译，其中包含一个指令

Question

我一直在尝试使用递归指令进行动态 html 字符串解析，但双向绑定似乎没有 working.Need 一点帮助 here.Below 是个笨蛋: http://plnkr.co/edit/ovz2RJDmnHPgLUqUaH7M 这是代码：

 var model = angular.module('modelApp', ['ui.bootstrap']);

model.controller('modalCtrl', ['$scope', '$window',
  function($scope, $window) {
    var modalctrl = this;
    modalctrl.form = {};

    $scope.showMeModalValues = function(){
      console.log(modalctrl.form);
    };
  }
]);

model.directive('contentInput', ['$compile',
  function($compile) {
    return {
      require: '^ngController',
      restrict: 'EA',
      link: function(scope, element, attrs, ctrl) {
        element.html('<input type="text" ng-model="ctrl.form.' + attrs.name + '" />');
        $compile(element.contents())(scope);
      }
    };
  }
]);

model.directive('dynamicInput', ['$compile', '$sce',
  function($compile, $sce) {
    return {
      templateUrl: 'myContent.html',
      require: '^ngController',
      restrict: 'EA',
      link: function(scope, element, attrs, ctrl) {
        var html = '<content-input name=' + attrs.name + '></content-input>';
        scope.html = $sce.trustAsHtml(html);
      }
    };
  }
]);

model.directive('reCompile', ['$compile',
  function($compile){
    return {
      require: '^ngController',
      restrict: 'EA',
      link: function(scope, element, attrs, ctrl){
        scope.$watch(attrs.reCompile , function(value){
          element.html(value);
          $compile(element.contents())(scope);
        });
      }
    };
  }]);

Answer 1

我找到问题了！！用 ctrl 分配 scope.ctrl 解决了不更新 modalctrl.form 的问题 Plunker 与工作解决方案：http://plnkr.co/edit/ovz2RJDmnHPgLUqUaH7M

model.directive('dynamicInput', ['$compile', '$sce',
  function($compile, $sce) {
    return {
      templateUrl: 'myContent.html',
      require: '^ngController',
      restrict: 'EA',
      link: function(scope, element, attrs, ctrl) {
        scope.ctrl = ctrl;
        var html = '<content-input name=' + attrs.name + '></content-input>';
        scope.html = $sce.trustAsHtml(html);
      }
    };
  }
]);

Angularjs 动态 html 字符串编译，其中包含一个指令

Angularjs dynamic html string compilation with an directive included inside

angularjs

angularjs-compile