ng-if 在放置在控制器外部并使用范围进行 $compile-ed 时不起作用,但 ng-show 可以
ng-if does not work when placed outside of controller and $compile-ed with scope, but ng-show does
我有一个简单的 angular 应用程序,它向范围添加变量并简单地显示它们。哪个简单又有效。
但是在angular中有一部分页面没有运行(实际上是jQuery插件),所以我不得不使用$compile
在呈现的 HTML 中启用指令使用。但是,在这个 HTML 中,ng-if
指令不起作用并且总是计算为 false 并消失。但是当使用 ng-show
时,情况如预期的那样 displayed/hidden。
可能是什么原因以及如何解决?
笨蛋:https://plnkr.co/edit/kWp4CaED9ZFaOmY36ixT?p=preview
<div ng-controller="GreeterController">
<strong>$scope</strong><br>
constTrue: {{constTrue}}<br>
ng-if="constTrue": <span ng-if="constTrue">Yes</span><br>
ng-show="constTrue": <span ng-show="constTrue">Yes</span><br>
returnTrue(): {{returnTrue()}}<br>
ng-if="returnTrue()": <span ng-if="returnTrue()">Yes</span><br>
ng-show="returnTrue()": <span ng-show="returnTrue()">Yes</span><br>
</div>
<hr>
<div id="outsideController">
<strong>$compile</strong><br>
constTrue: {{constTrue}}<br>
ng-if="constTrue": <span ng-if="constTrue">Yes</span><br>
ng-show="constTrue": <span ng-show="constTrue">Yes</span><br>
returnTrue(): {{returnTrue()}}<br>
ng-if="returnTrue()": <span ng-if="returnTrue()">Yes</span><br>
ng-show="returnTrue()": <span ng-show="returnTrue()">Yes</span><br>
</div>
app.controller('GreeterController', ['$scope', '$compile', '$timeout', function($scope, $compile, $timeout) {
$scope.constTrue = true;
$scope.returnTrue = function(){ return true }
var outsideController = document.getElementById('outsideController');
$compile(outsideController)($scope);
}]);
结果
$scope
constTrue: true
ng-if="constTrue": Yes
ng-show="constTrue": Yes
returnTrue(): true
ng-if="returnTrue()": Yes
ng-show="returnTrue()": Yes
$compile
constTrue: true
ng-if="constTrue":
ng-show="constTrue": Yes
returnTrue(): true
ng-if="returnTrue()":
ng-show="returnTrue()": Yes
出现这个问题是因为元素被编译了两次。一次当应用程序启动并再次使用控制器中的 $compile
服务时。
解决方案是在引导时向AngularJS框架声明该元素不被编译。
使用ng-non-bindable
指令:
<div ng-non-bindable>
<div id="outsideController">
<strong>$compile</strong><br>
constTrue: {{constTrue}}<br>
ng-if="constTrue": <span ng-if="constTrue">Yes</span><br>
ng-show="constTrue": <span ng-show="constTrue">Yes</span><br>
returnTrue(): {{returnTrue()}}<br>
ng-if="returnTrue()": <span ng-if="returnTrue()">Yes</span><br>
ng-show="returnTrue()": <span ng-show="returnTrue()">Yes</span><br>
</div>
</div>
然后当控制器编译时,元素将是干净且未修改的。
有关详细信息,请参阅
我有一个简单的 angular 应用程序,它向范围添加变量并简单地显示它们。哪个简单又有效。
但是在angular中有一部分页面没有运行(实际上是jQuery插件),所以我不得不使用$compile
在呈现的 HTML 中启用指令使用。但是,在这个 HTML 中,ng-if
指令不起作用并且总是计算为 false 并消失。但是当使用 ng-show
时,情况如预期的那样 displayed/hidden。
可能是什么原因以及如何解决?
笨蛋:https://plnkr.co/edit/kWp4CaED9ZFaOmY36ixT?p=preview
<div ng-controller="GreeterController">
<strong>$scope</strong><br>
constTrue: {{constTrue}}<br>
ng-if="constTrue": <span ng-if="constTrue">Yes</span><br>
ng-show="constTrue": <span ng-show="constTrue">Yes</span><br>
returnTrue(): {{returnTrue()}}<br>
ng-if="returnTrue()": <span ng-if="returnTrue()">Yes</span><br>
ng-show="returnTrue()": <span ng-show="returnTrue()">Yes</span><br>
</div>
<hr>
<div id="outsideController">
<strong>$compile</strong><br>
constTrue: {{constTrue}}<br>
ng-if="constTrue": <span ng-if="constTrue">Yes</span><br>
ng-show="constTrue": <span ng-show="constTrue">Yes</span><br>
returnTrue(): {{returnTrue()}}<br>
ng-if="returnTrue()": <span ng-if="returnTrue()">Yes</span><br>
ng-show="returnTrue()": <span ng-show="returnTrue()">Yes</span><br>
</div>
app.controller('GreeterController', ['$scope', '$compile', '$timeout', function($scope, $compile, $timeout) {
$scope.constTrue = true;
$scope.returnTrue = function(){ return true }
var outsideController = document.getElementById('outsideController');
$compile(outsideController)($scope);
}]);
结果
$scope
constTrue: true ng-if="constTrue": Yes ng-show="constTrue": Yes returnTrue(): true ng-if="returnTrue()": Yes ng-show="returnTrue()": Yes
$compile
constTrue: true ng-if="constTrue": ng-show="constTrue": Yes returnTrue(): true ng-if="returnTrue()": ng-show="returnTrue()": Yes
出现这个问题是因为元素被编译了两次。一次当应用程序启动并再次使用控制器中的 $compile
服务时。
解决方案是在引导时向AngularJS框架声明该元素不被编译。
使用ng-non-bindable
指令:
<div ng-non-bindable>
<div id="outsideController">
<strong>$compile</strong><br>
constTrue: {{constTrue}}<br>
ng-if="constTrue": <span ng-if="constTrue">Yes</span><br>
ng-show="constTrue": <span ng-show="constTrue">Yes</span><br>
returnTrue(): {{returnTrue()}}<br>
ng-if="returnTrue()": <span ng-if="returnTrue()">Yes</span><br>
ng-show="returnTrue()": <span ng-show="returnTrue()">Yes</span><br>
</div>
</div>
然后当控制器编译时,元素将是干净且未修改的。
有关详细信息,请参阅