带有引导弹出窗口的角度ng-if不起作用答案

【问题标题】：angular ng-if with bootstrap popover not working带有引导弹出窗口的角度ng-if不起作用
【发布时间】：2016-01-26 22:20:13
【问题描述】：

<div class="form-group" ng-if="firstname">
    <label>First Name</label>
    <input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name">
    <a href="" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="User Name" class="glyphicon glyphicon-info-sign infottp"></a>
</div>

我正在使用上面的代码。从那我通过单击-info-sign glyphicon显示一个弹出窗口，我使用ng-if条件进行显示/隐藏而不是ng-show和ng-hide。我的问题是当我使用ng-if时，弹出窗口不起作用.但是popover在ng-hide条件下工作，如果我删除ng-if条件。我的问题是为什么popover不能在ng-if条件下工作。

【问题讨论】：

标签： html angularjs twitter-bootstrap-3 popover

【解决方案1】：

明白了！是，ng-if 阻止 DOM 元素被渲染，而 ng-show / ng-hide 仅更改 display css-poperty

请参考 Angular 文档的第一段ng-if

【讨论】：

你的意思是 ng-if 完全删除显示 css-property 权限
ng-if 阻止 HTML 元素本身被渲染。
是的，在你的场景中它是合适的。每当你在 DOM 上有一些会经常显示/隐藏的东西时，你应该使用 ng-show，但在必须永久删除元素的情况下，使用 ng-if
ng-if 是添加/删除整个 DOM 元素，因此 ng-show/ng-hide 更重

【解决方案2】：

这是演示 ng-if 工作原理的示例

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $scope.firstname = "Test Data";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    <div ng-if="lastname"></div>
    <div class="form-group" ng-if="firstname">
      <label>First Name</label>
      <input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name">
      <label>Last Name</label>
      <input readonly type="text" class="form-control" id="last_name" ng-model="lastname" placeholder="Last Name">
    </div>
  </div>
</body>

【讨论】：