Question

我的AngularJS控制器中有一个功能：

//some stuff from controller

var variable1;
var variable2; 

$scope.setTitle = function () { 
            if ( //sth) {
                variable1 = "string"
                return variable1;
            }
            else {
                (function () {
                    //setting the variable2 - it will be the HTML code
                      variable2 = angular.element(document.querySelector('titleID'));
                      variable2.append(title);                        
                })();
            return variable2;
            }
        };

我从JSON文件中获取title，它看起来像：

 title = "Return product: <span data-ng-bind=\"productRet.ID\" />"

我必须使用JSON文件，因为我有一个很大的＆＃34;树＆＃34;在此JSON文件中，title根据function语句中else内的内容会有所不同

我在指令模板中调用setTitle()：

.directive('myDirective', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var template = { 
                             <!-- a lot of HTML -->
                             + "<div id=\"titleID\">"
                                 + "<span class=\"navbar-brand\" > {{setTitle()}} </span>"
                             + </div>
                           };

            templateObj = $compile(template)(scope);
            element.append(templateObj);
            }
        }
     }]);

如果setTitle()的结果是variable1，一切都很好。问题是当结果为variable2时，因为我收到错误：

＆＃34; [$ interpolate：interr]无法插值：{{setTitle（）}}
错误： [$ parse：isecdom]在Angular表达式中引用DOM节点是不允许的！表达式：setTitle（）

如何正确地将变量2中的HTML代码插入到我的模板中？

Answer 1

(function () {
                    //setting the variable2 - it will be the HTML code
                      var variable2 = angular.element(document.querySelector('titleID'));
                      variable2.append(title);                        
                })();
            return variable2;

变量2在函数范围之外不可用。尝试这样的事情：

var variable2;
(function () {
    //setting the variable2 - it will be the HTML code
    variable2 = angular.element(document.querySelector('titleID'));
    variable2.append(title);                        
})();
return variable2;

如何将Controller中的HTML附加到指令模板AngularJS中 - 错误无法插值

1 个答案: