angularjs – 为什么ngIf的优先级高于{{}}(插值)？
|
设置ngIf优先级(600)高于{{}}(100)的原因是什么？不应该在ng-if属性值中允许{{}}的优先级较低吗？
我想在$scope变量中有一个条件： 控制器： app.controller('MainCtrl',function($scope,$http,$parse) {
$scope.hide = "check === 'hidden'";
$scope.parsecond = function (cond) {
return $parse(cond)($scope);
};
});
模板： <body ng-controller="MainCtrl">
<div ng-if="!{{hide}}">funky ng-if div</div>
<div ng-hide="{{hide}}">ng-hide div</div>
<div ng-if="!parsecond(hide)">ng-if div</div>
<input type="input" ng-model="check" />
</body>
ng-hide工作正常,因为它解析hide变量的内容并返回“check ===’hidden’”,然后由ng-hide指令进行评估. 但ng-if尝试在插值之前评估{{hide}}有机会解析字符串因此ng-if抛出异常. 我发现的唯一解决方案是调用一个函数,它基本上完成了interpolate指令的工作并返回解析的内容. Plnkr显示问题：link 编辑： 在阅读文档之后,我发现了更好的方法,无需在$scope上使用自定义方法,因为angularjs已经有一个方法可以根据当前的$scope($eval)解析变量. 所以我的解决方案是： <body ng-controller="MainCtrl">
<div ng-if="!$eval(hide)">funky ng-if div</div>
<div ng-hide="{{hide}}">ng-hide div</div>
<div ng-if="!parsecond(hide)">ng-if div</div>
<input type="input" ng-model="check" />
</body>
更新了plnkr：link 虽然这仍然无法解释为什么ngIf具有更高的优先级. 编辑2： 只是让人们明白它不一样： 例如： 控制器： $scope.value = "hi"; $scope.condition = "value === 'bye'"; HTML： <div ng-hide="condition"></div> <!--This will be evaluated to true since !!"value ==='bye'" = true. -->
<div ng-hide="{{condition}}"></div> <!--This will be evaluated to false since value !== 'bye' = false -->
<div ng-if="condition"></div> <!--This will be evaluated to true since !!"value === 'bye'" = true. -->
<div ng-if="{{condition}}"></div> <!--This will give an exception since ngIf directive ran before interpolation directive in the $compile step. -->
<div ng-if="$eval(condition)"></div> <!--This will be evaluated to false since value !== 'bye' = false. -->
我的结论是,如果您希望指令在字符串中而不是在作用域上的属性中评估/设置监视,则使用$parse会更安全.虽然我可以将{{}}用于ng-hide / ng-show或任何优先级低于100的指令,但我猜它不安全,因为我依赖于编译顺序并且不是100 ％明确表示未来的补丁不会改变.
ng-if期望它的值是一个角度表达式 –
under the hood它只使用$scope.$watch.因此,如果要在范围内定义的某些变量(例如：scope.hide)中包含ng-if的内容,则在标记中添加ng-if =“hide”.这里没有双花括号.
现在回到你的问题：ng-if的优先级为600,但 UPDATE 你总是可以通过加入你的标记条件来包括ng-if的内容(比如scope.conditionFn)：ng-if =“conditionFn()”. 更新2 我更新了你的PLNKR以使其正常工作.你的plunker中ng-if和ng-hide之间的不一致与$compile中发生的插值优先级无关. 更新3 看起来你是正确的插值顺序在这里发挥作用,但是…我真的没有看到任何有理由在angular的表达式内插值. ng-if具有相对较高优先级的原因在于它从/向DOM移除/添加被转换的内容,而ng-hide仅显示/隐藏被转换的内容.我认为这是一个纯粹的巧合,一个指令似乎有效,另一个没有.但是,如果你不使用不必要的,多余的技巧,两者都可以按照预期的方式工作,我的掠夺者会表现出来. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |