Ng-model with Cookie

Question

I'm trying to take the first example from the angular.js homepage and adding in cookie support.

This is what I have so far: https://jsfiddle.net/y7dxa6n8/8/

It is:

<div ng-app="myApp">
  <div ng-controller="MyController as mc">
    <label>Name:</label>
    <input type="text" ng-model="mc.user" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{mc.user}}!</h1>
  </div>
</div>

var myApp = angular.module('myApp', ['ngCookies']);

myApp.controller('MyController', [function($cookies) {

           this.getCookieValue = function () {
                   $cookies.put('user', this.user);
                   return $cookies.get('user');
            }

           this.user = this.getCookieValue();
}]);

But it's not working, ive been trying to learn angular. Thanks

Answer 1

I'd suggest you create a service as such in the app module:

app.service('shareDataService', ['$cookieStore', function ($cookieStore) {

var _setAppData = function (key, data) { //userId, userName) {
    $cookieStore.put(key, data);
};

var _getAppData = function (key) {
    var appData = $cookieStore.get(key);
    return appData;
};
return {
    setAppData: _setAppData,
    getAppData: _getAppData
};
}]);

Inject the shareDataService in the controller to set and get cookie value as:

//set
var userData = { 'userId': $scope.userId, 'userName': $scope.userName };
shareDataService.setAppData('userData', userData);

//get
var sharedUserData = shareDataService.getAppData('userData');
$scope.userId = sharedUserData.userId;
$scope.userName = sharedUserData.userName;

Working Fiddle: https://jsfiddle.net/y7dxa6n8/10/

I have used the cookie service between two controllers. Fill out the text box to see how it gets utilized.

Answer 2

ok, examined your code once again, and here is your answer https://jsfiddle.net/wz3kgak3/

1. problem - wrong syntax: notice definition of controller, not using [] as second parameter If you are using [] in controller, you must use it this way:

   myApp.controller('MyController', ['$cookies', function($cookies) { .... }]);

this "long" format is javascript uglyfier safe, when param $cookies will become a or b or so, and will be inaccessible as $cookies, so you are telling that controller: "first parameter in my function is cookies

2. problem: you are using angular 1.3.x, there is no method PUT or GET in $cookies, that methods are avalaible only in angular 1.4+, so you need to use it old way: $cookies.user = 'something'; and getter: var something = $cookies.user;

3. problem - you are not storing that cookie value, model is updated, but cookie is not automatically binded, so use $watch for watching changes in user and store it:

   $watch('user', function(newValue) { $cookies.user = newValues; });

or do it via some event (click, submit or i dont know where)

EDIT: full working example with $scope https://jsfiddle.net/mwcxv820/