angularjs ng-if 值和函数之间的差异 [英] angularjs ng-if difference between value and function

问题描述

使用有什么区别吗ng-if 带值还是带函数?

ng-if="myvalue"ng-if="myfunc()"

更新(为了更好地理解我为什么要求)

html

<div class="容器"><ul class="nav navbar-nav"><a data-ui-sref="home" class="navbar-brand"><i class="logo"></i>Angular Express<li ui-sref-active="active"><a data-ui-sref="home">Home</a></li><ul class="nav navbar-nav navbar-right" data-ng-if="!nav.isAuthenticated()"><li><a data-ui-sref="session.login">登录</a></li><li><a data-ui-sref="session.signup">注册</a></li><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()">注销</a></li>

js

function NavController($rootScope, UserStorage){var nav = 这个；nav.isAuthenticated = function() {UserStorage.get();};}函数 UserLoginController($rootScope,$state, Users, UserStorage) {var 用户 = 这个；用户数据 = {};user.save = function() {用户登录(用户数据).然后(功能(响应){控制台日志(响应数据)；UserStorage.set(response.data);$state.go('home');}).catch(函数(响应){控制台日志(响应)；user.errors = response.data;});};}

如果我这样使用，我就达到了 $digest() 迭代

重新更新

(用于chandermani评论)

function UserStorage($sessionStorage) {返回 {设置:功能(数据){$sessionStorage.user = angular.toJson(data);},得到:函数(){返回 angular.fromJson($sessionStorage.user);},删除:函数(){删除 $sessionStorage.user;}};}

解决方案

对于 angular 来说都是 expression，它在当前作用域的上下文中求值.Angular 在每个摘要循环中都这样做.

如果你用的是功能方式的话，还有更多的射脚方式.myfunc 可以做

$scope.myfunc=function() {//做一些耗时的工作返回数据；};

在这种情况下，每个摘要周期的绑定评估都会使您的绑定和应用程序变慢.

因此，如果您使用基于函数的绑定，请确保函数通过执行最少的处理来快速返回.

Is there any difference using ng-if with a value or with a function ?

ng-if="myvalue"
ng-if="myfunc()"

UPDATE (for a better understanding why I'm asking for)

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;
        });
    };
}

If I use like this I've got a $digest() iterations reached

RE UPDATE

(for chandermani comment)

function UserStorage($sessionStorage) {
  return {
    set: function(data) {
        $sessionStorage.user = angular.toJson(data);
    },
    get: function() {
        return angular.fromJson($sessionStorage.user); 
    },
    del: function() {
        delete $sessionStorage.user;
    }
  };
}

解决方案

For angular both are expression, that it evaluates in context of current scope. Angular does this on each digest cycle.

There are more ways to shoot in the foot if you are using the function way. myfunc could do

$scope.myfunc=function() {
   //do some time consuming work
   return data;
};

In such a case the binding evaluation on each digest cycle will make your binding and app slow.

So if you are using function based binding make sure that functions return fast by doing minimum processing.

这篇关于angularjs ng-if 值和函数之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！