2015年10月6日火曜日

angularjs angular-cookiesの使い方

1、angular-cookiesのインストール
bower.jsonファイルの「dependencies」に、以下のように、「"angular-cookies": "^1.4.7"」を追加
そして、コマンドで「bower install」で関連ファイルをダウンロードする

もしくは、直接
npm install angular-cookies
でダウンロードする

2、自分のプロジェクトのフhtmlァイルに以下を追加
<script src="bower_components/angular-cookies/angular-cookies.js"></script>

3、jsファイルのmoduleに「ngCookies」を追加
例:

'use strict';

/** * @ngdoc overview * @name app * @description * # app * * Main module of the application. */angular  .module('app', [
    'ui.bootstrap',
    'ngAnimate',
    'ngCookies', // ←ここ
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'      })
      .otherwise({
        redirectTo: '/'      });
  });

4、最後に、Cookieを使う。「$cookieStroe」を使って値を読んだり、保存したりする。
例:

angular.module('app')
    .controller('MainCtrl', function ($scope, $q, constant, $cookieStore) {

        $scope.name = "";
     // クッキーを読み出す
        if ($cookieStore.get('name') != 'undefined') {
            $scope.name = $cookieStore.get('name');
        } else {
            $scope.name = "初期値";
        }

        
        // クッキーに値を保存        $scope.setCookie = function (value) {
            $cookieStore.put('name', value);
        };

    });

2015年9月30日水曜日

angularJs ui.Calendar eventを更新してくれない問題

angularJsのui.Calendarをつかって、eventを再描画してくれない問題が発生しました。

解決方法としては、 「uiCalendarConfig.calendars.calendar.fullCalendar('refetchEvents');」を追加

$scope.uiConfig = {
    calendar: {
        ....
        viewRender: function (view, element) {
            if (uiCalendarConfig.calendars.calendar !== 'undefined') {
                uiCalendarConfig.calendars.calendar.fullCalendar('refetchEvents');
            }
        }
    }
};

angular-ui/ui-calendar uiCalendarConfig.calendars undefined 問題

angularのuiCalendarをサンプル通りに使ってみました。

uiCalendarConfig.calendars[calendar].fullCalendar('render');」を読んだら、「undefined」のエラーになりました。


解決方法としては、
まず、HTMLに、「calendar」属性はなかった
<div class="calendar" ui-calendar="uiConfig.calendar"     ng-model="eventSources"></div>

追加した

<div class="calendar" calendar="myCalendar" ui-calendar="uiConfig.calendar"     ng-model="eventSources"></div>

JSのところ、
uiCalendarConfig.calendars.myCalendar.fullCalendar('render');