gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 17:29:53 24 4
gpt4 key购买 nike

如何评估使用 ng-bind-html 插入的元素的 ng-attr? 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);
};
}]);

第二个中的 ng-attr-d <path>已评估,但第一个未评估。

最佳答案

这就是指令的样子...

  • 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

关于javascript - 在 ng-bind-html 插入的 html 中使用 ng-attr,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23162041/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com