获取用于ng-if的一次性绑定
是指在AngularJS中使用ng-if指令时，可以通过一次性绑定来提高性能和减少不必要的监视。
一次性绑定是指在绑定表达式中使用两个冒号(::)来告诉AngularJS只在初始化时计算一次绑定值，并且在后续的变化中不再监视该表达式。这样可以减少监视的数量，提高性能。
使用一次性绑定的优势包括：
- 性能优化：减少了监视的数量，可以提高应用程序的性能。
- 减少不必要的计算：对于那些在初始化后不会再改变的表达式，不再进行重复计算，节省了计算资源。
- 简化代码：通过使用一次性绑定，可以简化代码，使其更易读和维护。
适用场景：
一次性绑定适用于那些在初始化后不会再改变的表达式，例如静态文本或者只会在初始化时计算一次的表达式。
腾讯云相关产品和产品介绍链接地址：
腾讯云提供了丰富的云计算产品和服务，其中与前端开发相关的产品包括云服务器、云函数、云存储等。具体可以参考以下链接获取更多信息：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- 云存储（COS）：https://cloud.tencent.com/product/cos
请注意，以上链接仅为示例，实际使用时应根据具体需求选择适合的产品和服务。
相关·内容
1回答
对Angular非常陌生，在整个展示中搜索之后，我就是找不到解决我的问题的方法。
我在指令/控制器中有以下函数：
ModalIssueController.prototype.openModal = function (e, issue) {
this._dataService.getMain().then(function (model) {
this._$scope.modalIssue.open = true;
this._$scope.modalIssue.issue = model.getIssueById(issu
浏览 0提问于2015-03-23得票数 0
如果我有一个这样的视图：
<div ng-repeat="foo in foos">
<p ng-if="bar">omg lol</p>
<p ng-if="!bar">lol omg</p>
</div>
我实际上是在创建(2 * foos.length) +1 $$watchers，这真的不太好。我在网上找到了几个来源，说你可以做ng-if="::bar"，但是当我这样做的时候，观察者的数量并没有改变。有没有办法强制ng-if成为一次性绑定？
这
浏览 0提问于2015-06-18得票数 30
回答已采纳
1回答
离子无限滚动失败，离子
、、、
我正在从一个web服务获取数据，并且应该在每次尝试更新时获取，所以从后面加载的最后一个id。这对我来说很好，问题出在离子卷轴上。我看到了，如果你没有伴随着ng-if无限的信息加载，倍感不自在。如果有数据确定收费，如果收费，否则不收费，这就是我为变量ng-if设置值的地方。但是一旦真正的seteo不再加载我的滚动。
HTML
<ion-infinite-scroll on-infinite="loadMore()" ng-if="!noMoreItemsAvailable" distance="1%"></ion-infinite
浏览 0提问于2015-06-30得票数 0
1回答
嗨，伙计们，我正在做一个项目，在这个项目中，我发现了数据绑定{：somevalue}和{somevalue}的不同语法，并且不知道其中一种和另一种的用途是什么，也无法在google上找到任何东西。
在过去，我使用了类型记录并使用了jsrender，并且记得这是它将模型绑定到视图的方式，但我不认为有任何关联。
例：
<a ng-href="{{::organiser.Phone}}">...</a>
ng-if="::organiser.Email"
我的意思是，是否有任何相关的差异，或它们可以使用可互换？
浏览 3提问于2017-04-19得票数 0
回答已采纳
我正在尝试理解angular 1摘要循环是如何工作的，以及它们如何影响现有的作用域。我有两个控制器，其中一个是使用转发器的角度材质。第二个控制器是一个简单的按钮单击事件。这两个事件都会打印到控制台，以查看发生了什么。
我看到的是，每次我点击第二个控制器上的按钮，中继器都会重新运行它的整个计算？
这就是angular的工作原理吗？请参阅附件中的代码-当点击按钮时，中继器每次都会在第一个控制器上重新运行。我假设每次在任何控制器上发生任何操作时，都会发生这种情况--这看起来很疯狂。
中继器代码如下：
<div flex="50" ng-repeat="item in i
浏览 0提问于2015-12-23得票数 0
我的一个同事在工作中给我展示了一个非常奇怪的行为，一次绑定的角度。
UseCase:
当您有一个文本是绑定元素的时，一次绑定在块内是条件的ng- if ，那么如果我们更改该值，例如添加一些字母，然后更改ng-if的条件，那么来自一次性绑定的值将被刷新。
HTML:
<div ng-if="a" class="blue">{{ ::text }}</div>
它是一种错误，还是预期的行为？
下面是我正在做的事情的示例：
浏览 6提问于2016-07-19得票数 3
回答已采纳
将ng-if与值或函数一起使用有什么区别吗？
ng-if="myvalue"
ng-if="myfunc()"
更新(为了更好地理解我为什么要这样做)
html
<div class="navbar navbar-default navbar-static-top" data-ng-controller="NavController as nav">
<div class="container">
<ul class="n
浏览 0提问于2015-01-09得票数 11
回答已采纳
我有一个ng-repeat，在那个ng-repeat里面我有
<p style="color:red">Booked Ref : {{agencyref(contentzz.Ref)}}</p>
根据angular的工作方式，它会不断地运行函数，但该函数内部有一个HTTP请求，我只想运行它一次。还有什么我可以用的吗？
浏览 0提问于2016-08-25得票数 0
我有很多有条件的内联类的控制器，帮助改变风格(例如，进行中的游戏和完成的游戏有不同的字体颜色)和ng-if条件表示(例如，显示短名称与全名，如果团队由2个人组成)，取决于传入数据的值。ng-if示例：
<span ng-if="(isShortName && eventType == 'S')|| eventType == 'D'" ng-bind="player.shortName"></span>
<span ng-if="(!isShortName &&
浏览 2提问于2015-04-01得票数 0
1回答
从1.3.0-Beta.10版本开始，AngularJS有了一个新特性：。
简单的表达式可以用::作为前缀，告诉angular在表达式第一次求值后停止观察。给出的常见示例如下：
<div>{{::user.name}}</div>
像下面这样的表达式有类似的语法吗？
<div ng-if="user.isSomething && user.isSomethingElse"></div>
<div ng-class="{classNameFoo: user.isSomething}">&l
浏览 1提问于2014-05-31得票数 93
回答已采纳
当我在ngRepeat循环中的页面中选择两个指令时，我正在尝试最好的方法，并在我的AngularJS应用程序中避免不必要的渲染/处理时间，我想知道哪种方法是最好的：
如果直接在指令html元素中设置ng-if，如下所示：
<div ng-repeat="element in list">
<my-directive-a ng-if="someFunction(element)"></my-directive-a>
<my-directive-b ng-if="!someFunction(elem
浏览 0提问于2017-04-15得票数 0
1回答
好的，我有一个页面，里面有一些用角x编辑管理的输入。
以下指令：
treeView.directive('selectWhenEditing',function(){
var linkFunction = function(scope,startingelem,attr)
{
console.log(startingelem[0]);
console.log (startingelem[0].querySelector('.editable'));
angular.element(starting
浏览 4提问于2014-12-16得票数 0
回答已采纳
1回答
我有一个HTML模板，我想在用户创建项目时和编辑项目时使用该模板。
我想做这样的事：
<input ng-model="newItem.description ? newItem.description : item.description"></input>
我知道这是可以做到的：
<input ng-if="newItem.description" ng-model="newItem.description"></input>
<input ng-if="item.descript
浏览 4提问于2014-09-26得票数 0
回答已采纳
我发现UI Bootstrap日期选择器通过包含特定语言的i18n js文件来支持本地化，例如：
<script src="https://code.angularjs.org/1.0.2/i18n/angular-locale_fr-fr.js"></script>
但这使得该语言固定为法语。有没有办法在两种语言之间切换，比如点击一个按钮就可以在英语和法语之间切换？？
浏览 0提问于2015-12-02得票数 1
1回答
获取动态表单值
、、、、
有没有办法检查在提交时，哪个文本框选择了哪个like选项。如下所示，用户可以仅为某些文本值选择like。html标签是基于对象参数动态生成的
for(int i = 0 ; i < object ; i++)
{
if(obj.textbox)
<input type="tex" id="obj.id"/> <input type="checkbox" id="obj.id"+"@"/>
else
<select> ... </select>
}
现在，
浏览 0提问于2014-07-12得票数 1
1回答
使用ng开关填充表
、、、
我在前端使用Angular.js来填充表。我想使用ng开关只显示在一列中有特定数据的数据，例如，只显示NFL计划列表中的“week 1”数据，其中数据中的一列是星期。
所以现在这段代码没有显示在表中的任何东西。如果有人能帮助解释这一点，我们将不胜感激。也许我该用纳克-如果？也许我应该按下按钮来显示第一周、第二周等等。对于这种情况，最好的解决方案是什么？
这是控制器..。
// #########################
// Predictions Controller
// #########################
BLV_app.controller('Predi
浏览 2提问于2015-08-13得票数 0
2回答
我使用的是angular js。如果输入文本id的长度大于5，我如何调用函数。
<input class="form-control" style="width:230px" ngmodel="Lookupemployer" ng-if={{ }} />
我想调用下面的函数
$scope.get = function()
{
}
如果Lookupemployer的长度大于5。
我试着这样做
ng-if={{ Lookupemployer.length >5 ? get() : ""}}
但没有起作用。有人
浏览 1提问于2015-02-20得票数 0
我正在开发一个AngularJS应用程序。在这个应用程序中，我正在处理一个定制指令。此指令将根据自定义属性值以不同方式呈现。目前，我的指令如下：
<my-view size="small"></my-view>
...
<my-view></my-view>
...
<my-view size="large"></my-view>
定义此指令的代码如下所示：
myApp.directive('myView', function ($window) {
return {
浏览 2提问于2014-09-21得票数 0
回答已采纳
2回答
我想知道，一旦ng-if的值为真，是否有可能解除绑定/销毁它？
我创建了带有递归指令的树结构，每个分支都有<div ng-if="visible">，如果需要呈现元素，它会一直跟踪。问题是解决方案增加了观察者的数量，因为每个ng-if都会创建新的。一旦ng-if表达式变成true，它就不会改变，这样就可以删除手表了，在这种情况下，有什么方法可以“摧毁”ng-if吗？
浏览 6提问于2015-11-30得票数 2
回答已采纳
3回答
我有一个简单的contactList组件，它有两个绑定：contacts和onRemove。
contacts只是要显示的联系人数组。
onRemove是一个回调函数
app
.component('contactList', {
template:
`<div ng-repeat="c in $ctrl.contacts">
{{c.name}}
<div ng-click="$ctrl.onRemove({contact: c})">Remo
浏览 6提问于2016-08-11得票数 14
回答已采纳
3回答
我想做一个切换按钮的bootstrap，但我面临一些问题。切换按钮不是只查看复选框显示，当我删除ngRepeat指令，然后它工作很好，只有一个按钮，但我需要多个按钮使用ngRepeat。所以请帮帮我。
<div class="box-body" ng-controller="AutomationController">
<div class="table-responsive">
<table class="table table-hover ">
<thead&g
浏览 0提问于2016-04-16得票数 1
1回答
嗨，我有一个用ng-重复填充的表。表的每一行都有几个被保存到数据库中的输入。
我的API将一个视图模型作为JSON传递给角，如果已经有一个对象的值，我想在列中显示没有输入的值。
这是我的桌子
<table class="table table-responsive">
<thead>
<tr>
<th></th>
<th>Result Value</th>
<th>Statement / Instructions</th&
浏览 2提问于2016-06-15得票数 3
回答已采纳
2回答
我有一个具有不同元素的html页面，根据某些条件(相同的条件)将使用角的ng-if显示/隐藏。
在我的控制器中，我创建一个boolean变量。
$scope.myCondition = getValue();
在我看来，我使用ng-if指令来听这个变量。
什么将是更好的性能智慧：
在此条件下编写更简洁的代码，但使用多个ng-if编写：
<div>
<div ng-if="myCondition" >-- a --</div>
<div ng-if="!myCondition">-- A --
浏览 2提问于2016-09-20得票数 0
回答已采纳
我正试着用动态ng-include做一些AngularJs的例子，但是不起作用。
下面是我的例子。
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Directives</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
浏览 1提问于2017-09-09得票数 0
1回答
在我的模板中，我有很多与我的用户权限和产品权限相关的条件，例如：
<div ng-if="user.rights == 'admin' || user.rights == 'owner' || products.rights.technical"></div>
这些权限不能在不转到新页面的情况下更改...所以我想我可以使用one-binding :：来获得更好的性能。
我试过了：
<div ng-if="::(user.rights == 'admin' || user.rights =
浏览 4提问于2017-04-12得票数 2
下面的代码片段不起作用请建议其他方法
<html>
`<div id="tablediv" ng-model="ngtable">
<div ng-show="ngtable">
<div ng-if="currentdevicetype == 'condition1'">
<!-- Other code to display contents -->
</div>`
</div>
</div>
</html>
浏览 9提问于2017-01-24得票数 1
2回答
我可能对范围有点困惑(我已经阅读了很多关于它的教程，但此时我不知道如何制作这个东西)，无论如何，这就是我想要做的：
我有一张有各种牢房的桌子
<table my-table>
<tr>
<td my-table-cell>
<span ng-if="!myTableCellStatus.editing">Bla 1</span>
<input ng-if="myTableCellStatus.editing" type="text" name=&
浏览 0提问于2014-06-28得票数 0
回答已采纳
因此，我目前有一个带有输入列表的ng-repeat。如果输入为空，则隐藏LI。
<li ng-repeat="(key, value) in jewel" ng-if="value !== ''">
<input ng-model="jewel[key]" />
</li>
这太棒了..但是，如果输入在页面上可见，我允许用户对其进行“编辑”。问题是，如果他们从输入中删除所有字符，LI就会消失，因为值变空了。
当用户只是编辑输入框时，我如何才能阻止LI消失？
浏览 0提问于2017-02-15得票数 1
回答已采纳
1回答
我目前正在研究angularJS应用程序的性能，并想知道这两个示例在性能上是否有任何差异：
不同之处在于，在第一个示例中，文件'testdirective.html‘中的ng-if布尔值没有在一次表达式中绑定。但是，它已经被绑定为'index.html‘中的一次性绑定。
<div ng-if="enabled">
vs
<div ng-if="::enabled">
在指令中和索引文件中使用一次表达式对性能更好吗？
谢谢!
浏览 1提问于2016-06-03得票数 0
回答已采纳
刚刚遇到了一个有趣的问题，下面是小提琴
'commbase‘指令调用’show template‘指令，它们都使用ng-if来显示某个模板。
“showmessage”指令有一个名为showAlert的API函数。问题是，如果我在ng-if (第20行)中调用显示消息，则函数showAlert无法调用，因为它已移动到$$childHead。现在，如果我删除ng-if或使用ng-show，一切都很好。
在使用ng时，似乎创建了一个新的作用域--如果，如何解决这个问题？或者，是否有更好的方法来显示公共API，使其每次都直接出现在父级范围中。
浏览 0提问于2015-10-20得票数 0
回答已采纳
1回答
日安，
我有一些javascript代码，其中我试图使用div find()方法在页面呈现后将某种样式应用于包含一个名为jQuery的类的div元素。
下面是网格页脚的预渲染HTML：
<div ng-if="messages != null && messages.length > 0" class="gridfooter">
<table class="list-footer">
...
</table>
</div>
下面是呈现的HTML：
<
浏览 0提问于2014-04-04得票数 0
2回答
我有重复的数据。-一些data.image (src)为空，src=null的部分为空。
我用简单的ng-if解决了它。
<div ng-repeat="data in data">
<div class="ImageContainer">
<img ng-src="{{::data.image}}" ng-if="data.image != null" />
</div>
<div class="LabelCont
浏览 6提问于2016-04-21得票数 4
回答已采纳
我想测试ng-if内部是否存在input，如果没有ng-if，测试会完全通过，但不会使用ng-if，这是正常的，因为ng-if会从DOM中删除元素。
这是ng-if
<div ng-ig="$ctrl.model.joineryTypes">
<input type="" name="">
</div>
测试
import angular from 'angular'
import 'angular-mocks'
let scope
let rootScope
let co
浏览 1提问于2017-07-21得票数 1
回答已采纳
我对指令编译和链接函数中的元素的引用感到困惑。
如果没有在指令中使用ng-if或ng-switch，则这两个函数具有相同的引用元素。但是，如果我使用ng- if /ng-switch，它们就不再是相同的引用，即使它们引用了相同的对象。
此外，对我在编译期间保存的所有其他元素的引用也是如此(使用ng-if/..它们是无用的)。我设法通过将所有引用移动到链接阶段来解决这个问题，但我想了解背后的原因。
我做了一个小演示：
angular.module('demo', [])
.directive('direc', function() {
return
浏览 1提问于2017-06-09得票数 0
1回答
不久以前，我开始学习角度，我正在尝试理解范围，绑定等等。
我有一个订单详细信息控制器：
orderApp.controller('OrderDetailsController', ['$http','$routeParams','$scope','config', function($http, $routeParams, $scope, config){
var orderCtrl = this;
orderCtrl.orderId = $routeParams.orderId;
ord
浏览 2提问于2016-03-29得票数 0
angularjs模板中的value和ng-value属性有什么不同？如果我使用value属性对字段使用ng-if，它将正常工作，但是如果我将属性value更改为ng-value，它将停止工作。
example 1 // it works
<input type='radio' ng-model='difficulty' value='hard'/>
<div ng-if="difficulty == 'hard'">
<p>difficulty is hard&
浏览 0提问于2014-05-26得票数 17
回答已采纳
我的问题是关于我在Stack Overflow上找到的答案。
这个策略与一个自定义的ng-if指令和ng-if指令完美地配合使用，但是，如果您想要多个，该怎么办呢？我花了几个小时试图想出一些东西，但想不出一个干净的方法来做这件事。有没有人为多个自定义ng-if指令创建了一种策略？
浏览 14提问于2016-08-30得票数 2
**main.js:**
$scope.status = [
{name:'SQL', stat:"up"},
{name:'Web Server', stat:"down"},
{name:'Index', stat:"down"}
];
**index.html:**
<table>
<tr>
<td ng-repeat="x in
浏览 0提问于2016-10-20得票数 0
我见过这样的语法
<a href={{ ::something}}>some other thing</a>
那个双冒号是干嘛用的？如果将其删除会发生什么情况？
浏览 0提问于2015-12-10得票数 48
回答已采纳
1回答
因此，我有一个名为“显示更多”的按钮，当它达到我想要更改为“显示更少”的按钮时，它将增加列表中的项目数，这会使列表返回到其默认值。
我使用ng-if来确定要显示的按钮，用ng-单击来确定操作。当它们一起使用时，ng单击停止工作，当我单击时什么也不会发生。
这是我用玉石写的html，feedLimit是列表中显示的项目数。
button.btn.btn-primary.btn-block.btn-sm.btn-outline(type='button')(ng-if= "feedLimit < notifications.all.length", ng-cl
浏览 4提问于2014-09-04得票数 6
回答已采纳
1回答
我在角度指南上读到，这些表达式不能计算条件。
我在by控制器里有一个var $scope.a = 2;
如果我知道的话：ng-show={{a==2}} --那么ng显示就变成了一个真理，这是正确的。
但如果我这么做了：ng-if={{a==2}} --那么这个就不会显示
为什么表达方式的变化？
浏览 2提问于2014-03-18得票数 1
回答已采纳
2回答
我正在尝试学习角JS，我是一个绝对的初学者。我试着使用ng--如果使用ng指令，根据它们的性别和关系status.When打印'Mr或Ms‘，我就将已婚的模型绑定在div标签中，它给出了正确的值，.But之后的绑定，每次都打印为真。还有其他检查条件的方法吗？另外，我试着用控制器检查条件，为什么不工作呢？请帮帮我！
<body ng-app="myApp" ng-controller="myFirstController" ng- init="first='';last='';gender='Male&
浏览 3提问于2017-07-07得票数 0
回答已采纳
这是我认为的密码..。
<label for="restaurant-type-select" class="control-label">
Type
</label>
<select class="form-control" id="restaurant-type-select" ng-model="restaurant.type" ng-change="restaurantTypeChanged()">
<option value=
浏览 0提问于2015-09-22得票数 1
我在我的应用程序中使用了Angular UI Bootstrap，特别是分页()。我需要/想要覆盖/扩展First/Last和Previous/Next的函数。
我尝试了以下方法(将Last的函数改为调用changePage而不是selectPage)：
<div ng-controller="PaginationDemoCtrl">
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize
浏览 2提问于2015-12-05得票数 2
我对angular js完全陌生，并且尝试在ng-if为真时调用函数，我的代码是=>
ng-repeat="image in post.postImages" ng-if="$index <= 3" ng-init="image.showDeleteIcon= false && hellow()"
和我的js =>
<script type="text/javascript">
$scope.hellow = function ()
{
浏览 0提问于2017-06-07得票数 0
是否可以将参数传递给ng-if中的指令模板？
index.html：
<my-directive showName="John"></my-directive>
template.html：
<h1 ng-repeat="customer in customers" ng-if="customer.name === showName ">
{{customer.name}} is {{customer.age}}
</h1>
理想情况下，上面的示例只显示John的数据。也许这不是正确的方法？因
浏览 3提问于2015-03-27得票数 0
回答已采纳
我正在做一个成本计算器页面，它有一个旋转木马，可以让人们选择有价格的商品。
然后，这个价格将有另一个选择的次数，每月。
因此，总成本将是价格*每月次数(tpm)。
如果我把它放到页面中，它就是{ price *tpm}。
如果只是这两个变量，我可以使用这个实现方法，但这实际上是一个未来的价格计算器。另外还有两个额外的属性:年数和利率。
因此，实际计算将是：(价格* tpm) * 12) *年)* %。
我真的不想把这个放在纸上。我更愿意将计算结果放在模型中，然后在视图html中显示最终的计算结果。
我的应用程序是相当复杂的，布局方面的，但我已经提出了一个小小提琴来演示逻辑。
$scope.$
浏览 0提问于2014-01-20得票数 1
回答已采纳
我有一个这样的物体：
$scope.cars=[
{'element':'Ford','count':3},
{'element':'Honda','count':2},
{'element':'Ferrari','count':1},
{'element':'Delorean','count':6}
];
我想要实现的是重复每个元素n次，其中n是由它的属性count定义的
浏览 7提问于2016-12-13得票数 1
回答已采纳
我试图在JavaScript中使用ng-if表达式。然而，它什么也没做。它总是返回false。
我尝试的是：
ng-if="localStorage.getItem('grid-layout') == 'list' (如果为真，则显示div)
div不会渲染，因为它总是返回false。网格布局值保存在localStorage中。这不是问题所在。
我查了网站上的文件。Angular说了关于ng-if的以下几点
如果表达式是falsy，则元素将从DOM树中移除。如果是真实的，则将编译后的元素的副本添加到DOM树中。
是否可以仅在JavaScript
浏览 1提问于2017-05-31得票数 3
回答已采纳
我从几个新闻来源获得消息。每5-10分钟一次。我使用AngularJS 1.5，ng-repeat对我从服务器填充到DOM的超过500个新闻条目的几个列表非常有用。问题是，虽然我使用了track by，但是每当我在这个列表上使用过滤器时，我的CPU使用率仍然很高。
我尝试过绑定库(即bindonce ng-repeat )，但没有明显的收获。我还使用了AngularJS 1.3+ feature ::，它可以工作，但在此之后，服务器更新不会替换旧的内容，因为::使内容在过程中不可变。
我想知道是否有办法停止AngularJS监视ng中的项目列表，直到下次我从服务器获得新内容时(这是警告)？
浏览 1提问于2016-12-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
