标签 AngularJS 下的文章

Rails+AngularJS 从登陆漫谈Session以及Promise

分几篇写太麻烦了,这是Rails+AngularJS坑中的最后一篇,我们讲讲Rails中的Session以及AngularJS中的Promise。

Rails+AngularJS自己折腾是因为教程写的又臭又长,而且不是中文,我在想,我只是把Rails当做一个Api,是不是根本用不着那么多麻烦,不就是传个json出来么?

Yes,That's right.

我们来回忆一下:Rails 实现用户登录存取Session思路总结当时篇尾戏剧性的变化,这次看的是http://guides.ruby-china.org,效果好很多,需要什么直接去查。

- 阅读剩余部分 -

AngularJS directive如何进行ng-repeat的遍历输出

昨天真的依旧踩到了不少坑,这是其中的一个。

在directive里,其实scope究竟是拿来干嘛的,就目前我看来可以绑定传值,那么为什么我们要传值。

经过这次坑,总算是明白了不少。

Template或者TemplateUrl可以说是一个封闭的环境,换言之,你在外面用的在这里并不能用,如果需要用,要怎么办呢?用Scope把值传进去。

所以需要用ng-repeat的时候,最好的方法其实是将ng-repeat以template的形式进行遍历,假设我们有一个需要遍历的变量message,在外围我们使用:list="message"

接下来我们对list进行双向绑定,也就是说两边随便哪一边变了他都会改变,用=:

- 阅读剩余部分 -

AngularJS 让contentEditable支持ng-model

以前在一个网站上看到一个可以修改的框,以为是input,结果没想到是div,顿时觉得这是黑科技啊!!

然而并不是,后来我才知道有个attr叫做contentEditable,介绍见:http://www.w3school.com.cn/tags/att_global_contenteditable.asp

换言之这个so easy啦。

那么问题来了,AngualarJS里,我们可以在input里用ng-model来进行双向绑定,那么contentEditable呢?AngularJS目前并没有直接提供支持,但我们可以自己写。

使用一个directive就能搞定这个:

/* 注册contentEditable支持ngModel */
app.directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      // view -> model
      element.bind('blur', function() {
        scope.$apply(function() {
          ctrl.$setViewValue(element.html());
        });
      });

      // model -> view
      ctrl.$render = function() {
        element.html(ctrl.$viewValue);
      };

      // load init value from DOM
      ctrl.$render();
    }
  };
});

Rails+AngularJS 实现Ajax前后端完全分离

因为网上的教程字数太多,而且都是英文的(没错这才是重点)。想要前后端完全分离的我完全懒得考虑这么多,就自己开始折腾能不能很轻松的完全只是用Control和Model而不管View,不引入gem,现在简单的小demo终于成功了。

Rails的初始准备见:Rails 处理跨站请求

准备完这个,接下来我们就只要管Control怎么写就行了。

首先来尝试一下get,最简单。

    def index
        json_str = {"xx" => "hello"}.to_json
        render :json=>json_str, status=>'200'
    end

- 阅读剩余部分 -

AngularJS Directive中link的四个参数究竟是什么

AngularJS中的Directive简直是个深渊,今天又小小的跟它杠上了。

以这一段为例:

app.directive('posts', function() {
    return {
        scope: {
            adding: '&'
        },
        //require: 'ngModel',
        controller: 'AppController',
        link: function(scope, elm, attrs, ctrl) {
            console.log(scope);
            console.log(elm);
            console.log(attrs);
            console.log(ctrl);
        },
        template: '<input type="text" name="author" placeholder="author" ng-model="author" required><input type="text" name="content" placeholder="content" ng-model="content"><input value="post" type="submit" ng-click="adding({msg:{author:author, content: content}})">',
    };
});

通过console.log我们可以观察一下到底各个是什么东西。

scope:输出一个作用域,这个作用域是由Controller决定的,如果没有定义,是空值。

elm:输出一个元素数组,数组中的每个元素是调用directive的DOM树

attrs:输出一个Object, Object内是该DOM元素的各种属性方法

ctrl:输出一个Object,是对应的controller

AngularJS 动态参数传值问题

今天完整的练了个手,结果踩到不少坑,其中一个是传参数的问题,我希望用绑定好的msg去传参,结果就遇到问题了。

当时写的是app.addMessage({{msg}})结果一直报错,坑爹。查了一下才知道,如果使用{{ }}相当于转换为一个常量,而这里需要传入的是变量,所以直接这么写就行了:

app.addMessage(msg)

参考:https://cnodejs.org/topic/5305cb2e6c0325e50137797d