0

对于使用 ng-bind-html 插入的元素，您如何评估 ng-attr？JS Fiddle 说明了我在这里谈论的内容。

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);
    };
}]);

第二个中的 ng-attr-d<path>被评估，但第一个没有。

4

1 回答 1

2

这可能看起来像一个指令......

  • 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>

提琴手

于 2014-04-18T22:09:53.373 回答