具有隔离作用域和编译的指令清除模式

Question

我有一个由选择下拉列表组成的指令，当选择被更改时（我正在观看模型ID），我正在重新编译模板并将元素设置为编译的html。 奇怪的是，跨度显示正确的值，因为选择文本不正确。

我正在尝试做的，如果有人可以提供更好的解决方案，那就是拥有模板动态的一部分，因此当选择更改时，我希望加载不同的部分（这也需要编译，因为它会绑定字段）

任何人都可以看到为什么会发生这种情况吗？感谢。

app.directive('editor', ['$http', '$compile', function ($http, $compile) {
function createTemplate(id) {
    var template =
        '<div><select class="form-control" ng-model="lettingsourceId" >' +
            '<option ng-repeat="lettingsrc in lettingSources" value="{{lettingsrc.id}}">{{lettingsrc.description}}</option>' +
        '</select></div>';
    return template + "<span>" + id + "</span>";
}
return {
    restrict: 'E',
    scope: {},
    link: function ($scope, $element, $attributes) {
        $scope.values= [{ id: "1", description: 'testa' }, { id: "2", description: 'testb' }];
        $scope.modelid= "1";
        var html = createTemplate($scope.modelid);
        $element.html($compile(html)($scope));
        $scope.$watch('modelid', function () {
            var html = createTemplate($scope.modelid);
            $element.html($compile(html)($scope));
        });
    }
};

}]）;

Answer 1

查看此

app.directive('editor', ['$http', '$compile', function ($http, $compile) {
function createTemplate(id) {
    var template =
        '<div><select class="form-control" ng-model="' + id + '" >' +
            '<option ng-repeat="lettingsrc in lettingSources" value="{{lettingsrc.id}}">{{lettingsrc.description}}</option>' +
        '</select>';
    return template + "<span>{{" + id + "}}</span></div>";
}
return {
    restrict: 'E',
    scope: {},
    link: function ($scope, $element, $attributes) {
        $scope.lettingSources= [{ id: "1", description: 'testa' }, { id: "2", description: 'testb' }];
        $scope.modelid= "1";
        var html = createTemplate('modelid');
        var element = angular.element(html);
        $element.append(element);
        $compile(element)($scope);
        // $scope.$watch('modelid', function () {
        //     var html = createTemplate($scope.modelid);
        //     // $element.html(html);
        //     // $compile(elm)($scope);
        // });
    }
};
}]);