角度错误 ng-if答案

【问题标题】：Angular Error ng-if角度错误 ng-if
【发布时间】：2014-11-07 02:29:54
【问题描述】：

Angular Js 返回这个错误链接

 [1]http://errors.angularjs.org/1.2.10/$parse/lexerr?p0=Unterminated%20quote&p1=s%2013-14%20%5B'%5D&p2=recipe.ID%20!%3D%3D'

我不知道如何应用该解决方案。请帮我。谢谢我的javascript：

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

app.directive("otcDynamic", function ($compile) {// compile Json data return and wrap inside html
    return {
    link: function (scope, element) {
        var template = global.userhtml;
        var linkFn = $compile(template);
        var content = linkFn(scope);
        element.append(content);
     }
   }
});

从 web api 返回 Json 数据

var global {
userhtml ='<table class="recipe-table" cellspacing="0" cellpadding="0"><tbody><tr class="recipe-list" data-ng-repeat="recipe in recipe_data" ng-if="recipe.Keyword == keyw.Keyword" ><td  id="td-img{{recipe.CodeListe}}" rowspan="2"><center><span id="img{{recipe.ID}}X"><a id="{{recipe.ID}}" href="javascript:void(0);"> <img  ng-if="recipe.ID !==''" fallback-src="images/default.png" ng-src="{{recipe.Pictures}}" class="images" id="img{{recipe.ID}}"/><img  ng-if="recipe.Pictures===''" class="images" src="images/default.png" id="img1"/></a></span></center></td><td class="recipes"><div id="drn" class="div-recipe-name"><strong>{{recipe.Name}}</strong></div><br /><div id="drd" class="div-recipe-desc">{{recipe.desc}}</div><div class="div-recipe-allergen">{{recipe.allergen}}</div><div class="div-recipe-cost">{{recipe.cost}}</div></td></tr></tbody></table>' 
}

我的HTML：

  <accordion close-others="false">
  <div>
    <accordion-group class="div-recipe-header">
      <accordion-heading></accordion-heading>
        <my-directive></my-directive>
          <div otc-dynamic></div>   
    </accordion-group>
  </div>
</accordion>

【问题讨论】：

从您的 Web API 返回的数据不是有效的 JSON。它甚至不是有效的 Javascript。
实际上它编译成功，但不是 ng-if 配方 ID 和 recipe.Pictures 的一部分。我知道我必须加上反斜杠才能让 Json 阅读。但我无法在 sql server 中插入带有反斜杠的数据。帮助我如何使我的 json 有效..
如果它可以编译，那么这不可能是您的 API 返回的实际数据。正如我所说，这甚至不是有效的 Javascript。
@winterblood Angular $compile 函数接受一个 HTML 字符串，这正是他从 'userhtml' 变量中给出的。问题可能是由于他的 HTML 字符串被单引号包围，但似乎也试图在其中包含未转义的单引号......

标签： javascript html angularjs accordion angular-ng-if

【解决方案1】：

您的 web api 应该返回如下内容：

{ 
  global: {
    userhtml: 'your html code in a string' 
  }
}

但请注意，您还有其他方法（更好的方法）可以做到这一点。您可以接收纯 json 数据并使用 html 模板进行渲染。

还有一点：global 在很多语言和框架中都是保留字，它不是变量或哈希键的好名字。考虑将其更改为更合适的内容。

【讨论】：