javascript - 从 JSON 响应编译动态 HTML 和绑定(bind)变量 - 具有隔离范围的指令 - AngularJS

Question

我需要从数据库渲染动态模板，还需要将变量绑定(bind)到表达式。

我的响应 JSON 将如下所示，

[{
    "htmlTemplate": "<div>{{name}}</div><div>{{age}}</div>",
    "bindData": {
        "name": "safeer",
        "age" : "25"
    }
}, {
    "htmlTemplate": "<span>{{name}}</span><div>{{address}}</div>",
    "bindData": {
        "name": "john",
        "address":"qwerty"
    }
}, {
    "htmlTemplate": "<h4>{{name}}</h4><h2>{{country}}</h2>",
    "bindData": {
        "name": "james",
        "country":"India",
        "state" : "Kerala"
    }
}]

我根据问题的答案创建了一个指令 Compiling dynamic HTML strings from database

在 html 中，demo.html

<div dynamic="html"></div>

在指令中，directive.js

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

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

它将渲染 html 模板并用 $scope 变量 name 替换变量。

但我需要使用相应的 bindData 呈现每个 htmlTemplate。那就是用隔离的范围数据渲染每个模板。需要泛化指令。

感谢任何帮助!提前致谢。

Answer 1

当您收到 JSON 数据时，您可以使用 angular.fromJSON将 json 字符串解码到数组中(除非您使用的是 $http.get() ，它已经为您完成了)...

//request the JSON from server
jsonString = SomeFactory.fetchDataFromServer();
$scope.dataArray = angular.fromJson(jsonString);

...然后使用 ngRepeat创建多个元素:

<div ng-repeat="element in dataArray" dynamic="element"></div>

像这样修改你的指令:

  app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.bindData = {};
      scope.$watch(attrs.dynamic, function(dynamic) {
         console.log('Watch called');
        ele.html(dynamic.htmlTemplate); //here's your htmlTemplate being compiled
        $compile(ele.contents())(scope);
        scope.bindData = dynamic.bindData; //here's your bound data ifyou need the reference
        scope.name = dynamic.bindData.name; //bound data property name
      }, true); //deep watch
    }
  };
  });

编辑:或者您可以简单地传递 element.htmlTemplate和 element.bindData正如用户 Vineet 在回答中提到的那样，通过两个单独的属性分别与指令分开，这更有意义。Edit2:修复了一些错误。

这是 fiddle :Fiddle