Question

我有一个角度指令：

angular.module("App").directive("myButtons", function () {
    return {
        restrict: "E",
        scope: 
            {
                teststring: '@'
            },
        templateUrl: "test.html"
    }
});

使用以下模板：

<div>
    <input type="button" onclick="teststring" value="Hi" />
</div>

这是HTML中的指令：

<my-buttons teststring="Whatsup" />

我希望传递给teststring的值出现在渲染的html中。

目前我只是点击了＆＃34; teststring＆＃34;。

我做错了什么。我已尝试在模板上添加{{}}以及@，=和＆amp;关于范围值。

Answer 1

你可以使用ng-bind-html在js中设置html并动态渲染到DOM

将模板更改为此

并在指令中添加链接功能，如此

 angular.module("app").directive("myButtons", function($sce) {
     return {
         restrict: "E",
         scope: {
             teststring: '@'
         },
         template: `<div>
                <div ng-bind-html="trust(sampleCode)">
            </div>`,
         link: function(scope) {
             scope.sampleCode = '<input type="button" onclick="' + scope.teststring + '" value="Hi" />';

             scope.trust = function(html) {
                 return $sce.trustAsHtml(html);
             }
         }
     }
 });

另外，将$sce作为服务注入指令

演示

angular.module("app",[])
.controller("ctrl",function($scope){


})
 angular.module("app").directive("myButtons", function($sce) {
 return {
     restrict: "E",
     scope: {
         teststring: '@'
     },
     template: `<div>
            <div ng-bind-html="trust(sampleCode)">
        </div>`,
     link: function(scope) {
         scope.sampleCode = '<input type="button" onclick="' + scope.teststring + '" value="Hi" />';

         scope.trust = function(html) {
             return $sce.trustAsHtml(html);
         }
     }
 }
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <my-buttons teststring="Whatsup" />
</div>

在angular指令中传递字符串

1 个答案: