为什么ngIf的优先级高于{{}}（插值）？ [英] Why ngIf has higher priority than {{ }} (interpolate)?
问题描述
什么是背后设置 ngIf 优先级（600）高于推理{{}} （100）？难道不应该有一个较低的优先级，使 {{}} 在 NG-如果属性值？
What is the reasoning behind setting ngIf priority (600) higher than {{ }}(100)? Shouldn't it have a lower priority to allow {{ }} inside ng-if attribute value?
我想有一个 $范围变量中的一个条件：
I would like to have a condition inside a $scope variable:
控制器：
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-隐藏工作正常，因为它解析隐藏变量并返回检查==='隐藏'然后把它评估的内容由 NG-隐藏指令。
ng-hide works fine since it parses the contents of the hide variable and returns "check === 'hidden'" which then gets evaluated by ng-hide directive.
但 NG-如果试图评估 {{隐藏}} 之前插值有机会解析因此字符串 NG-如果抛出异常。
But ng-if tries to evaluate {{hide}} before interpolate has had a chance to parse the string hence ng-if throws an exception.
我发现的唯一的解决办法是调用一个函数，基本上做的插值指令的工作，返回解析的内容。
The only solution I've found is call a function that basically does the job of the interpolate directive and returns the parsed content.
Plnkr显示问题： rel=\"nofollow\">链接
Plnkr showing the issue: link
编辑：
阅读文档后，我发现这样做，而不需要对 $范围的自定义方法的更好的方式自angularjs早已是分析的变量对的方法其电流 $范围（ $ EVAL ）。
After reading documentation I've found better way of doing it without the need of a custom method on the $scope since angularjs has already a method that parses a variable against its current $scope ($eval).
所以，我的解决方案是：
So my solution would be:
<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：链接
虽然这还不能解释为什么ngIf具有更高的优先级。
Although this still doesn't explain why ngIf has higher priority.
编辑2：
只是让人们明白，这是不一样的：
Just so people understand that it's not the same:
例如：
控制器：
$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="$parse(condition)"></div> <!--This will be evaluated to false since value !== 'bye' = false. -->
我的结论是，可以更安全地使用 $解析如果你想指令评估/设置监视的字符串，而不是在范围内的财产。虽然这是真的，我可以使用 {{}} 为 NG-隐藏 / NG-节目或具有超过100个较低的优先级，但我猜，因为我根据在编译为了它不是安全的，它不是100％明确表示，不会在将来的补丁更改任何指令
My conclusion is that it safer to use $parse if you want the directive to evaluate/set a watch in the string rather than in the property on the scope. Although it's true that I could use {{ }} for ng-hide/ng-show or any directive that has a lower priority than 100 but I'm guessing it's not safe since I'm depending in the compiling order and it's not 100% clear that it won't change in future patches.
推荐答案
NG-如果预计其值设置为是一个棱角分明的前pression - >它只是利用了 $范围。$看。因此，如果你想调节包括的内容NG-如果上的范围定义的一些变量（让说： scope.hide ），你把 NG-IF =隐藏在加价。没有双大括号这里。
ng-if expects its value to be an angular expression - under the hood it just makes use of $scope.$watch. Therefore, if you want to condition including content of ng-if on some variable defined on the scope (let say: scope.hide), you put ng-if="hide" in your mark-up. No double curly braces here.
现在回到你的问题：这是真的， NG-如果具有优先 600 ，而<一HREF =https://github.com/angular/angular.js/blob/master/src/ng/interpolate.js#L86相对=nofollow> $插值 是棱角分明的服务 - 而不是一个指令。这样 $插值没有定义优先级。你从哪里得到 100 的？
Now back to your question: it is true that ng-if has priority of 600, but $interpolate is angular's service - not a directive. As such $interpolate does not define priority. Where did you get 100 from?
您可以随时条件包括的内容NG-如果上的一些功能（让说 scope.conditionFn ）由把你的加价： NG-IF =conditionFn（）
You can always condition including content of ng-if on some function (let say scope.conditionFn) by putting in your mark-up: ng-if="conditionFn()".
我更新了自己的 PLNKR ，使其正常工作。 之间的矛盾NG-如果和 NG-隐藏在plunker无关插值优先发生在 $编译。
I updated your PLNKR to make it working. The inconsistencies between ng-if and ng-hide in your plunker had nothing to do with priority of interpolation taking place in $compile.
看来你是正确的，插值为了在这里扮演一个角色，但...我真的看不到任何好的理由角的前pression内插值。之所以 NG-如果具有较高的优先级，它消除/增加了transcluded内容从/到DOM，而 NG-隐藏只是显示/隐藏transcluded内容。我认为这是一个巧合，一个指令的看起来的工作，其他没有。 但是如果您不使用不必要的，多余的技巧，既做的工作如预期，有什么我plunker节目。
It seems that you are right that order of interpolation plays a role here, but... I really do not see any good reason to interpolate inside of angular's expression. The reason why ng-if has relatively high priority is that it removes/adds transcluded content from/to DOM, whereas ng-hide just shows/hides the transcluded content. I think it is a pure coincidence that one directive seems to work and the other not. But if you do not use unnecessary, superfluous tricks, both do work as intended, what my plunker shows.
这篇关于为什么ngIf的优先级高于{{}}（插值）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
