2

是否可以在页面上而不是在内存中使用 AngularJs 渲染模板？我需要准备 html 以作为电子邮件发送。我想我可以在隐藏的 div 中渲染一些东西，然后以某种方式将它的内容分配给变量，但对我来说它看起来很丑:(

4

2 回答 2

2

你可以看看 $compile 函数：http ://docs.angularjs.org/api/ng .$compile

例子：

function MyCtrl($scope, $compile){
  // You would probably fetch this email template by some service
  var template = '</div>Hi {{name}}!</div></div>Here\'s your newsletter ...</div>'; // Email template

  $scope.name = 'Alber';

  // this produces string '</div>Hi Alber!</div></div>Here\'s your newsletter ...</div>'
  var compiledTemplate = $compile(template)($scope); 

};
于 2013-02-22T12:10:25.770 回答
0

当然，您可以使用 $compile 服务来呈现模板。呈现的模板将是一个未附加到 DOM 树的 DOM 节点。而且你不必附加它来获取它的内容。你可以这样做：

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.controller('MainCtrl', ['$scope', '$compile', function($scope, $compile){
        var compiled;
        $scope.compileTemplate = function() {
            var template = '<ul><li ng-repeat="i in [1, 2, 3]">{{i}}</li></ul>';
            var linker = $compile(template);
            compiled = linker($scope);
        }
        $scope.sendEmail = function() {
            alert("Send: " + compiled[0].outerHTML);
        }
    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="compileTemplate()">Compile template</button>
    <button ng-click="sendEmail()">Send email</button>
</body>
</html>

我在这里将它们分成两个不同的函数的原因是，当您编译并将其链接到作用域时，模板直到下一个摘要之后才会填充数据。也就是说，如果您在函数compiled[0].outerHTML末尾访问compileTemplate()，它不会被填充（除非您使用超时......）。

于 2013-02-22T12:23:12.983 回答