带有 Cookie 的 Ng 模型 [英] Ng-model with Cookie

问题描述

我正在尝试从 angular.js 主页中获取第一个示例并添加 cookie 支持.

这是我目前所拥有的:https://jsfiddle.net/y7dxa6n8/8/

是:

<div ng-controller="MyController as mc"><标签>名称:</label><input type="text" ng-model="mc.user" placeholder="在此处输入名称"><小时><h1>你好{{mc.user}}！</h1>

var myApp = angular.module('myApp', ['ngCookies']);myApp.controller('MyController', [function($cookies) {this.getCookieValue = 函数 () {$cookies.put('user', this.user);返回 $cookies.get('user');}this.user = this.getCookieValue();}]);

但它不起作用，我一直在尝试学习 angular.谢谢

解决方案

好的，再次检查您的代码，这是您的答案https://jsfiddle.net/wz3kgak3/

1. 问题 - 错误的语法:注意控制器的定义，不使用 [] 作为第二个参数如果你在控制器中使用 []，你必须这样使用它:

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

这种长"格式是javascript更难看的安全，当param $cookies 将变成a 或b 左右时，将无法访问作为 $cookies，所以你告诉控制器:我函数中的第一个参数是 cookies

2. 问题:您使用的是 angular 1.3.x，$cookies 中没有方法 PUT 或 GET，该方法仅在 angular 1.4+ 中可用，因此您需要使用旧方法:$cookies.user = 'something'; 和 getter:var something = $cookies.user;

3. 问题 - 您没有存储该 cookie 值，模型已更新，但 cookie 不会自动绑定，因此使用 $watch 观察 user 中的更改并存储它:

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

或者通过一些事件来完成(点击、提交或者我不知道在哪里)

带有 $scope 的完整工作示例https://jsfiddle.net/mwcxv820/

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

解决方案

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/

这篇关于带有 Cookie 的 Ng 模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！