Question

如何评估ng-attr已插入ng-bind-html的元素？ JS Fiddle illustrating what I'm talking about here.

HTML：

<body ng-app="TestApp" ng-controller="TestCtrl">
    <div ng-bind-html='y | to_trusted'></div>
    <svg width="100" height="100">
        <path ng-attr-d="M{{x}},10L50,50L10,50Z" />
    </svg>
</body>

使用Javascript：

var app = angular.module("TestApp", []);

app.controller('TestCtrl', function ($scope, $interval) {
    $scope.y = '<svg width="100" height="100"><path ng-attr-d="M{{x}},10L50,50L10,50Z"/></svg>';
    $scope.x = 10;
});

app.filter('to_trusted', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
    };
}]);

评估第二个<path>中的ng-attr-d，但第一个不是。

Answer 1

以下是这可能看起来像指令......

restrict: 'E'：此指令用作元素
x: '=':属性作为属性传入
模板是模板

app.directive('myPath', function () {
    return {
        restrict: 'E',
        scope: {
            x: '='
        },
        template: '<svg width="100" height="100"><path ng-attr-d="M{{x}},10L50,50L10,50Z"/></svg>'
    };
});

它可以像这样使用......

<my-path x="x"></my-path>

<强> JsFiddle

在ng-bind-html中插入的html中使用ng-attr

1 个答案: