AngularJS ng-show/ng-hide/ng-if指令失效问题求助

首先咱们来定位问题根源：你遇到的"false"文本显示问题，核心是运算符优先级错误导致的字符串拼接逻辑混乱了。

看你原来的代码片段：

ng-if="('+$scope.response1[i].priority===undefined+')"

在JavaScript里，+（字符串拼接）和===（全等比较）优先级相同且左结合。这意味着代码会先执行'<i ng-if="(' + $scope.response1[i].priority，得到一个拼接后的字符串，再把这个字符串和undefined做全等比较，结果必然是false，最后把这个false直接拼到后续字符串里——这就导致UI里出现了多余的"false"文本，而不是正确的ng-if属性值。

另外，你的预期是存在有效优先级时显示星星，但原来的条件$scope.response1[i].priority===undefined是"优先级不存在时显示"，逻辑刚好反了，这也需要调整。

修正步骤 #

1. 修复运算符优先级问题 #

把条件表达式用括号包裹，确保先计算布尔值，再拼接到字符串中：

ng-if="(' + ($scope.response1[i].priority !== undefined) + ')"

这样就能正确生成ng-if="(true)"或ng-if="(false)"，不会再出现多余的"false"文本。

2. 调整显示逻辑（匹配你的预期） #

因为你要的是有优先级时显示星星，所以条件可以改为：

• 明确判断存在：$scope.response1[i].priority !== undefined
• 更简洁的写法：$scope.response1[i].priority（只要优先级是真值就会显示）

3. 处理颜色函数的边界情况 #

当优先级不存在时，调用getDemandColor可能传入undefined导致报错或异常颜色。可以给个默认值：

style="color:'+getDemandColor($scope.response1[i].priority || 'default')+';"

或者直接在getDemandColor函数内部处理undefined的情况。

4. 确保Angular指令生效（关键！） #

如果你的JS库是直接把content插入DOM而没经过Angular编译流程，ng-if/ng-hide这些指令是不会生效的。这种情况下需要手动调用Angular的$compile服务编译这段HTML：

// 假设库插入元素后你能获取到该元素
var targetElement = document.getElementById('your-element-id');
$compile(targetElement)($scope);

具体调用时机可以参考所用JS库的回调或生命周期钩子。

修正后的完整代码片段 #

$scope.dataItem.add({ 
    "id": $scope.response1[i].id, 
    "group": $scope.response1[i].subCapabilityName, 
    "content": '<input id="txt' + $scope.response1[i].id + '" type="text" value="' + $scope.response1[i].subject + '" onclick="this.focus()"><i ng-if="(' + ($scope.response1[i].priority !== undefined) + ')" class="fa fa-star" aria-hidden="true" style="color:'+getDemandColor($scope.response1[i].priority || 'default')+';"></i>', 
    "start": $scope.response1[i].startDate.toString().substring(0, $scope.response1[i].startDate.indexOf('T')), 
    "end": $scope.response1[i].endDate.substring(0, $scope.response1[i].endDate.indexOf('T')), 
    "type": 'range', 
    "className": tmp1, 
    "title": (!$scope.response1[i].description ? $scope.response1[i].subject : $scope.response1[i].description) 
});

额外建议 #

尽量避免直接拼接HTML字符串，这种方式容易出错且难维护。如果可以的话，建议用Angular的模板或组件来动态生成内容，更安全也更符合Angular的开发模式。

内容的提问来源于stack exchange，提问作者Kiriti