0

我的控制器中有一个 JSON 数组，我想通过多次使用 ng-repeat 来生成我创建的指令。每次它都会通过调用模板中的特定指令函数将数组中的数据传递给指令。我能够完美地得到我的字符串，但因为生成的模板必须是一些 HTML 代码，Angular 不会解释它。

如果我改变

    template: '< div ng-bind="getTemplate(thiselem)">< /div>',

为了

    template: '< div ng-bind-html="getTemplate(thiselem)">< /div>',

（我在“div”关键字之前添加了一些空格以允许显示 html 代码）

我在我的项目中执行了我的 HTML 片段，但是通常使用大括号之间的某些数据的所有内容都不会被解释（应该返回未定义或 null）。我如何才能访问这些数据和/或使指令的模板正确生成结果？

我做了这个plunker来向你展示我的问题。

非常感谢您提前。

4

2 回答 2

0

您将返回 getTemplate() 函数的结果，将所有内容视为字符串，包括传递的对象。你只需要使用它的实际值：

link: function(scope, element, attrs) {
    scope.getTemplate = function(thiselem) {
        return '<h1>' + thiselem.id + ':' + thiselem.name + 'tt</h1>';
    }
}

这是 plunker：http ://plnkr.co/edit/N5ziwjSRDWDMEWAH9ODl?p=preview

于 2015-12-03T17:30:31.157 回答
0

您可以插入您在指令中使用的字符串。请注意，我将变量 $interpolate 注入到指令中。这是来自 Angular 网站的官方文档：AngularJS: API: $interpolate

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.elements = [
      {id: 1, name: 'bonjour'},
      {id: 2, name: 'bonsoir'}
    ];
  $scope.text = 'Hello world';
});

app.directive("frameelement", ['$interpolate', function($interpolate) {
  return {
        restrict: 'EA',
        scope: {
            thiselem: '='
        },
        template: '<div ng-bind="getTemplate(thiselem)"></div>',
        link: function(scope, element, attrs) {
            scope.getTemplate = function(thiselem) {
                return $interpolate('<h1>{{thiselem.id}} : {{thiselem.name}} tt</h1>')(scope);
            }
        }
    };
}]);
于 2015-12-03T17:29:49.320 回答