Question

我需要创建一个指令，允许传入的数据包含角度表达式，例如下面的设计示例（Codepen）：

<div ng-controller="ctrl">
    <list-test data="data"></list-test>
</div>

data定义为：

app.controller('ctrl', ['$scope', function($scope) {
    $scope.data = [
        '<input type="text" ng-model="testModel">',
        '{{testModel}}'
    ];
}]);

我的指示如下：

app.directive('listTest', ['$sce', function($sce) {
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        template: [
            '<ul ng-repeat="item in data">',
                '<li ng-bind-html="escape(item)"></li>',
            '</ul>'
        ].join(''),
        link: function(scope) {
            scope.escape = function(item) {
                return $sce.trustAsHtml(item);
            };
        }
    };
}]);

我尝试修改我的链接器以通过编译器运行该项，但这会导致错误。我确实知道ng-transclude但它并不适合我的特定用例。

Answer 1

做类似的事情：

scope.$watch("htmlList", function(value) {
    if (value) {
        childScope = scope.$new();
        childElement = $compile(htmlString(value))(childScope);
        elem.append(childElement);
    }            
});

当然，如果它不仅仅是一次性绑定，它会变得更复杂。在这种情况下，代码需要删除以前的子元素并销毁先前的子范围。

DEMO on JSFiddle。

AngularJS - 将范围数据解析为Angular表达式

1 个答案: