angularjs ng-if 值和函数之间的差异
angularjs ng-if difference between value and function
使用有什么区别吗
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="nav navbar-nav">
<a data-ui-sref="home" class="navbar-brand"><i class="logo"></i> Angular Express</a>
<li ui-sref-active="active"><a data-ui-sref="home">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" data-ng-if="!nav.isAuthenticated()">
<li><a data-ui-sref="session.login">Log in</a></li>
<li><a data-ui-sref="session.signup">Sign up</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" data-ng-if="nav.isAuthenticated()">
<li><i class="fa fa-user"></i> <span ng-bind="nav.isAuthenticated().username"></span> <a href="/api/auth/logout" data-ng-click="nav.logout()">Logout</a></li>
</ul>
</div>
</div>
js
function NavController($rootScope, UserStorage){
var nav = this;
nav.isAuthenticated = function() {
UserStorage.get();
};
}
function UserLoginController($rootScope,$state, Users, UserStorage) {
var user = this;
user.data = {};
user.save = function() {
Users.login(user.data).then(function(response) {
console.log(response.data);
UserStorage.set(response.data);
$state.go('home');
})
.catch(function(response) {
console.log(response);
user.errors = response.data;
});
};
}
如果我这样使用,我已经达到了 $digest() 迭代次数
重新更新
(用于 chandermani 评论)
function UserStorage($sessionStorage) {
return {
set: function(data) {
$sessionStorage.user = angular.toJson(data);
},
get: function() {
return angular.fromJson($sessionStorage.user);
},
del: function() {
delete $sessionStorage.user;
}
};
}
对于 angular 两者都是 expression
,它在当前范围的上下文中进行评估。 Angular 在每个摘要周期执行此操作。
如果使用函数方式,射脚的方式会更多。 myfunc
可以
$scope.myfunc=function() {
//do some time consuming work
return data;
};
在这种情况下,每个摘要周期的绑定评估会使您的绑定和应用变慢。
因此,如果您使用基于函数的绑定,请确保函数 return 通过进行最少的处理来快速执行。
在 ng-repeat 指令上调用函数可能会导致一些性能问题,但如果它是一次性评估,那么就我所注意到的而言并没有真正的区别。
我总是尝试评估 属性:ng-if="myValue"
会评估范围变量 $scope.myValue
使用有什么区别吗 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="nav navbar-nav">
<a data-ui-sref="home" class="navbar-brand"><i class="logo"></i> Angular Express</a>
<li ui-sref-active="active"><a data-ui-sref="home">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" data-ng-if="!nav.isAuthenticated()">
<li><a data-ui-sref="session.login">Log in</a></li>
<li><a data-ui-sref="session.signup">Sign up</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" data-ng-if="nav.isAuthenticated()">
<li><i class="fa fa-user"></i> <span ng-bind="nav.isAuthenticated().username"></span> <a href="/api/auth/logout" data-ng-click="nav.logout()">Logout</a></li>
</ul>
</div>
</div>
js
function NavController($rootScope, UserStorage){
var nav = this;
nav.isAuthenticated = function() {
UserStorage.get();
};
}
function UserLoginController($rootScope,$state, Users, UserStorage) {
var user = this;
user.data = {};
user.save = function() {
Users.login(user.data).then(function(response) {
console.log(response.data);
UserStorage.set(response.data);
$state.go('home');
})
.catch(function(response) {
console.log(response);
user.errors = response.data;
});
};
}
如果我这样使用,我已经达到了 $digest() 迭代次数
重新更新
(用于 chandermani 评论)
function UserStorage($sessionStorage) {
return {
set: function(data) {
$sessionStorage.user = angular.toJson(data);
},
get: function() {
return angular.fromJson($sessionStorage.user);
},
del: function() {
delete $sessionStorage.user;
}
};
}
对于 angular 两者都是 expression
,它在当前范围的上下文中进行评估。 Angular 在每个摘要周期执行此操作。
如果使用函数方式,射脚的方式会更多。 myfunc
可以
$scope.myfunc=function() {
//do some time consuming work
return data;
};
在这种情况下,每个摘要周期的绑定评估会使您的绑定和应用变慢。
因此,如果您使用基于函数的绑定,请确保函数 return 通过进行最少的处理来快速执行。
在 ng-repeat 指令上调用函数可能会导致一些性能问题,但如果它是一次性评估,那么就我所注意到的而言并没有真正的区别。
我总是尝试评估 属性:ng-if="myValue"
会评估范围变量 $scope.myValue