zoukankan      html  css  js  c++  java
  • 浅谈AngularJS中的$parse和$eval

    AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval。

    总的来说,$parse和$eval都是作用于AngularJS的表达式。

    什么是表达式?
    AngularJS中的表达式就是一些类似于JavaScript代码的代码片段(但是它们和JavaScript代码有不尽相同)。表达式通常被用来防止在绑定中,例如{{expression}}。下面是一个例子:

    1 + 2 = {{ 1 + 2 }}
    或者:

    My name is {{ user.name }}
    $parse服务
    $parse服务可以讲一个表达式转换为一个函数。这个函数可以被调用,其中的参数是一个上下文对象,通常来说是作用域。

    另外,通过$parse的表达式返回的这个函数有一个assign属性。这个assign属性也是一个函数,它可以用来在给定的上下文中改变这个表达式的值。

    下面是一段简单的代码:

    <div my-attr="obj.name" my-directive>testing</div>

    app.directive('myDirective',function($log,$parse){
    return function(scope,elem,attrs){
    //解析"my-attr属性值到一个函数中"
    var model = $parse(attrs.myAttr);
    //model现在是一个函数,可以调用它来获取表达式的值
    //下面这行代码将会输出作用域中obj.name的值
    $log.log(model(scope));

    elem.bind('click',function(){
    //'model.assign'也是一个函数,它用来更新表达式的值
    model.assign(scope,'New name');
    scope.$apply();
    })
    }
    });
    上面的例子可以充分体现我们为什么需要$parse服务。如果属性值是name,那么我们完全可以不用$parse,只用scope[attrs.myAttr]即可。但是在上面的例子中,方括号并不管用。

    $eval服务
    $eval是一个作用域scope中的方法,它将会在当前作用域中执行一个表达式并返回结果:

    scope.a = 1;
    scope.b = 2;

    scope.$eval('a+b'); // 3

  • 相关阅读:
    Karma: 3
    Karma:2. 集成 Karma 和 mocha 进行单元测试
    Android Eclipseproject开发中的常见调试问题(二)android.os.NetworkOnMainThreadException 异常的解决的方法
    CSDN日报20170226——《你离心想事成仅仅差一个计划》
    重装linuxserver简易流程
    移动端 h5开发相关内容总结——CSS篇
    Oracle学习笔记(6)——函数
    Spark学习
    Android教你怎样一步步打造通用适配器
    C语言学习
  • 原文地址:https://www.cnblogs.com/xujie520/p/5640850.html
Copyright © 2011-2022 走看看