在 angular 指令中的 html $compile 之后，父 $scope 值未显示在 ng 模型中

Question

我正在尝试从 Typescript 中的 Angular 范围隔离指令生成 HTML 和输入控件，并使用父范围属性对输入控件进行建模。

我遇到的问题是，尽管 Angular $ 编译了 html，但模型值未显示在输入控件中，但可以在浏览器控制台上看到。

以下是我的 angular 打字稿指令 :

class InputControl implements ng.IDirective {


    restrict = "E";
    scope = {
        field: "=field"
    };
    templateUrl = "";
    controller = ["$scope","$sce","$compile", ($scope: any,$sce:ng.ISCEService, $compile : ng.ICompileService) => {
        var controlHTML = "";
        var jsonObj = "$scope.$parent.$parent.sheetModel.model." + eval("$scope.field.Property");
        switch($scope.field.PropertyDetail.Type)
        {
            case "string":{

                controlHTML = $compile("<input type='text' class='form-control' ng-model='"+jsonObj+"'></input>'")($scope)[0].outerHTML;
                break;
            }

        }
        //$scope.html = controlHTML;
         $scope.html = $sce.trustAsHtml(controlHTML);
    }];

    controllerAs = "inputcontroller";

    constructor(private $location: ng.ILocationService , private $sce:ng.ISCEService , private $compile : ng.ICompileService) {
        var a : InputControl = this;
        a.templateUrl=$sce.trustAsUrl("http://"+window.location.host +"/AngularApp/Templates/inputcontrol.html");
    }

    link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any, $compile : ng.ICompileService) => {
    };

    static factory(): ng.IDirectiveFactory {
        const directive = ($location: ng.ILocationService , $sce : ng.ISCEService,$compile : ng.ICompileService) => new InputControl($location,$sce,$compile);
        directive.$inject = ["$location","$sce","$compile"];
        return directive;
    }
}

angular.module("SheetApp").directive("inputControl", InputControl.factory());

HTML 模板

<div class="form-group">
<label for="field.Property" ng-bind="field.PropertyDetail.Caption"></label>
<span ng-bind-html="html"></span>

输入生成：

在调试时，它有值但没有模型到控件中

Answer 1

它开始工作，当我从

更改线路时

var jsonObj = "$scope.$parent.$parent.sheetModel.model." + eval("$scope.field.Property");

到

var jsonObj = "$parent.$parent.sheetModel.model." + eval("$scope.field.Property");

在 angular 指令中的 html $compile 之后，父 $scope 值未显示在 ng 模型中

Parent $scope value not showing in ng model after html $compile in angular directive

html

javascript

angularjs

typescript

angular-directive