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

2 番目の 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>

Jsフィドル

于 2014-04-18T22:09:53.373 に答える