[AngularJS] Using $parse Service

$parse is useful when you want to parse an expression and the context is not defined yet.

For example, I have a table component which allows user to pass in all the row items and define action for each row.

    <ttmd-table
        items="vm.invoices"
        headers="vm.headers"
    >
        <ttmd-actions>
            <ttmd-action
                if="shouldPay"
                text="pay"
                on-click="vm.pay(payload)"
            ></ttmd-action>
        </ttmd-actions>
    </ttmd-table>

What I want is only if ‘shouldPay‘ is true when display the `ttmd-action`, if not just hide it, so there is "if" attr in the tag.

But there is one problem to make it works: Because `shouldPay` prop locates on each item, if we use ng-repeat, we would do somthing like this:

<div ng-repeat="item in items track by $index">
    <ttmd-action
         if="item.shouldPay"
    ></ttmd-action>
</div    

But I don‘t want to make component hard for user to use, so the problem we need to solve here is

  • parse the expression we passed in with the right context

So here is $parse come into play:

    shouldDisplay(){

        let getter = this.$parse(this.if); // get the expression and conver it to a function
        let context = this.ItemCtrl.getSelectedItem(); // Find the right context
        console.log(context);
        console.log(getter(context));
        return getter(context); // parse the expression with the right context
    }
时间: 2024-09-30 13:04:10

[AngularJS] Using $parse Service的相关文章

angularjs 中 Factory,Service,Provider 之间的区别

本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行演示 Factory,Service,Provider 之间的区别 1. Factory factory('dataService',function(){ return { golbal_sitename:"this is the shared value", sayHello:func

angularjs 中使用 service 在controller 之间 share 对象和数据

在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是使用创建一个service, 在service 中存储公共的数据,然后把service 注入到controller中来达到share 数据的目的. 下面是最简单的一个sample 列子 angularjs 模板页面, 有userContoller 和 customerController,我们将在这两个control

理解AngularJS中的Service类型

Angular中有几种不同类型的services.每一种都有自己的独特用法. 需要记住的非常重要的一点是service总是一个单体,无论是哪种类型的service. 注释:单体是一种设计模式,它限制了每一个类仅能够实例化为一个对象.无论我们在什么地方注入我们的service,将永远使用同一个实例. Constant 例子: app.constant('fooConfig',{ config1: true, config2: "Default config2" }); Constant是

AngularJS中使用service,并同步数据

service是单例对象,在应用中不同代码块之间共享数据. 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module = angular.module( "my.new.module", [] ); 2.创建一个service服务: module.service( 'Book', [ '$rootScope', function( $rootScope ) { var service = { books:

angularjs培训之service

原文地址:http://angular-tips.com/blog/2013/08/understanding-service-types/ Angular中有几种不同类型的services.每一种都有自己的独特用法. 需要记住的非常重要的一点是service总是一个单体,无论是哪种类型的service,这是个很被期望的行为. 注释:单体是一种设计模式,它限制了每一个类仅能够实例化为一个对象.无论我们在什么地方注入我们的service,将永远使用同一个实例. Provider Provider是

AngularJS 之 Factory vs Service vs Provider【转】

英文原文:AngularJS: Factory vs Service vs Provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 service 里.我每天都会在 Stack Overflow 上看到几个同类的问题,关于如何在 controller 里保存持久化数据.这就不是 controller 该干的事.出于内存性

Angularjs 自定义服务 provide 里 provider 方法 以及 factory、 service 方法以及 provider 供应商的概念

Angularjs 自定义服务 provide 里 provider 方法 以及factory. service 方法以及 provider 供应商的概念 学习要点:1. Angularjs 中的 provider 方法2. Angularjs 中的 factory 方法3. Angularjs 中的 service 方法4. provider 供应商的概念5. 研究 ionic 代码中的 services 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆

[转载]我看到的最好的解释AngularJs中Factory和Service和Provide不同

AngularJS: Factory vs Service vs Provider By Tyler On May 4, 2014 With 44 Comments In Technical When you first get started with Angular, you’ll naturally find yourself flooding your controllers and scopes with unnecessary logic. It’s important to rea

angularjs入门整理

之前发过一篇博文,从mobile angular ui的demo和其官网初识整个angularjs的大体使用,但是没很好学习,只是通过一些技术博文初步认识,陷入很多坑.所以现在在中文官网正式整理下知识点巩固 模板内置指令 引导程序 ng-app 设置变量 ng-model 获取变量 {{}} 遍历 ng-repeat="row in rows" 搜索功能 ng-repeat="row in rows | filter:查询变量名" 排序功能 ng-repeat=&q