ng-if条件在指令模板中不起作用

时间:2017-06-13 15:54:16

标签: html angularjs css3

我在自定义指令中检查ng-if条件时遇到问题。实际上,我在模板中绑定响应和检查条件。这里,它不检查条件并显示两个字体很棒的图标。

    Html code:

    <mydirective ng-repeat="Activiy in dDetails.activiy | orderBy:'$index':true | limitTo: limit as results"  n="{{Activiy.auditlog}}
     m="{{Activiy.activityStatus}}"></mydirective>

    Directive code:

    app.directive("mydirective", function(){
          return {
            restrict: "EA",
            scope: {
              n: "@",
              m: "@"      
            },
            template: "<span>{{n}}</span><span ng-if= 'm' == 'SUCCESS'><i class='fa fa-check' style='color: green;'></i></span><span ng-if= 'm' !='SUCCESS'><i class='fa fa-close' style='color: red;'></i></span><br>",

            link: function(scope){
              //console.log("foo: " + scope.m + " loaded");
            }
          };
        }); 

[![在此处输入图片说明] [1]] [1]     这就是它在屏幕截图中的样子。实际上它应该只显示一个图标,如果响应成功,它应该显示绿色标记。如果失败,它应该显示红色十字标记。

Can you please correct my code.

Thanks in Advance.


  [1]: https://i.stack.imgur.com/1FUuv.png

这就是它在屏幕截图中的样子。实际上它应该只显示一个图标。

1 个答案:

答案 0 :(得分:2)

当您在范围内引用变量时,您不会使用引号。如果你把引号都解释成一个字符串。尝试这样的事情:

app.directive("mydirective", function(){
  return {
    restrict: "EA",
    scope: {
      n: "@",
      m: "@"      
    },
    template: '<span>{{n}}</span><span ng-if="m == \'SUCCESS\'"><i class="fa fa-check" style="color: green;"></i></span><span ng-if="m !=\'SUCCESS\'><i class="fa fa-close" style="color: red;"></i></span><br>',

    link: function(scope){
      //console.log("foo: " + scope.m + " loaded");
    }
  };
});