0

我有一个普通的角度应用程序，它向范围添加变量并简单地显示它们。这既简单又有效。

但是页面的一部分不是以角度运行的（实际上它是一个 jQuery 插件），所以我必须$compile使用在呈现的 HTML 中启用指令使用。但是，在此 HTML 中，该ng-if指令不起作用，并且始终评估为 false 并消失。但是在使用时ng-show，事物会按预期显示/隐藏。

可能是什么原因以及如何修复？

Plunker：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);
}]);

结果

$范围

constTrue: true
ng-if="constTrue": Yes
ng-show="constTrue": Yes
returnTrue(): true
ng-if="returnTrue()": Yes
ng-show="returnTrue()": Yes

$编译

constTrue: true
ng-if="constTrue": 
ng-show="constTrue": Yes
returnTrue(): true
ng-if="returnTrue()": 
ng-show="returnTrue()": Yes
4

1 回答 1

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>

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

PLNKR 上的DEMO

有关详细信息，请参阅

于 2019-08-04T20:12:35.157 回答