通过使用双花括号 {{}} 在指令模板中使用范围变量答案

【问题标题】：Use scope variables within directive template by using double curly brackets {{}}通过使用双花括号 {{}} 在指令模板中使用范围变量
【发布时间】：2015-12-03 17:12:05
【问题描述】：

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

如果我改变了

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

为

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

（我在 "div" 关键字之前添加了一些空格，以便同时显示 html 代码）

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

我已经这样做了plunker 向您展示我的问题。

非常感谢您。

【问题讨论】：

标签： javascript angularjs angularjs-scope curly-brackets

【解决方案1】：

您可以插入您在指令中使用的字符串。请注意，我将变量 $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);
            }
        }
    };
}]);

【讨论】：

【解决方案2】：

您正在返回 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

【讨论】：