ng-if 在放置在控制器外部并使用范围进行 $compile-ed 时不起作用，但 ng-show 可以

Question

我有一个简单的 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

Answer 1

出现这个问题是因为元素被编译了两次。一次当应用程序启动并再次使用控制器中的 $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>

然后当控制器编译时，元素将是干净且未修改的。

DEMO on PLNKR

有关详细信息，请参阅

AngularJS ng-non-bindable Directive API Reference

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

angularjs

angularjs-scope

angularjs-compile

angularjs-ng-if

结果

$scope

$compile