Question

我正在使用AngularJS v1.2.1。

改进的ng-bind-html指令允许我将不安全的Html信任到我的视图中。

实施例

HTML：

<div ng-repeat="example in examples" ng-bind-html="example.content()"></div>

JS：

function controller($scope, $sce)
{

    function ex()
    {
        this.click = function ()
        {
            alert("clicked");
        }

        this.content() = function ()
        {
            //if
            return $sce.trustAsHtml('<button ng-click="click()">some text</button>'); 
            // no problem, but click is not called

            //when
            return $sce.parseAsHtml('<button ng-click="click()">some text</button>'); 
            //throw an error
        }
    }

    $scope.examples = [new ex(), new ex()];

}

我的问题是，如何绑定可能包含Angular表达式或指令的HTML内容？

Answer 1

如果您需要每个元素的动态模板，正如您的问题所示，一种解决方案是在指令中使用$ compile来解析本地范围上下文中的HTML。此Plunk中显示了一个简单版本。

示例指令：

app.directive('customContent', function($compile) {
  return function(scope, el, attrs) {
    el.replaceWith($compile(scope.example.content)(scope));
  }
});

相应的HTML：

<div ng-repeat="example in examples">
  <div custom-content></div>
</div>

请注意，在Plunk控制器中，为了简单起见，我已将click函数拉出到作用域中，因为在模板HTML中，您在作用域的上下文中调用click（），而不是在示例对象上。对于每个示例，有几种方法可以使用不同的单击函数，如果这是您想要执行的操作。这个egghead.io screencast有一个很好的例子，可以将表达式明确地传递给指令;在您的情况下，它可以是单击函数或整个示例对象，具体取决于您的需要。

绑定和解析HTML内容

1 个答案: