2016-03-30 105 views
0

我在我的項目中使用了最喜歡的按鈕。這裏是一個demo將ID保存到本地存儲中,並使用按鈕angularjs

的script.js

angular.module("MyApp",[]); 

service.js

angular 
.module("MyApp") 
.service("FavoriteService",[function(){ 


//Favorites functions 
this.isLocalStorageEnable = function() { 

    if(typeof (Storage) !== "undefined"){ 
     return true; 
    } 
    else{ 
     return false; 
    } 
}; 

this.isFavorite = function(scope){ 
    var fav = localStorage.getItem(scope.id); 
    return fav === "1"; 
}; 


this.setFav = function(scope){ 
    localStorage.setItem(scope.id,"1"); 

}; 


this.deleteFav = function(scope){ 
    localStorage.removeItem(scope.id); 

}; 


}]); 

directive.js

angular.module("MyApp").directive("albumDirective", ["FavoriteService", function(FavoriteService) { 

return { 
restrict: "AE", 
templateUrl: "AlbumDirective.html", 
replace: true, 
scope: { 
    id: "=albumId" 
}, 
    link: function(scope) 
    { 
     scope.isLocalStorageEnable = FavoriteService.isLocalStorageEnable; 
     scope.isFavorite = FavoriteService.isFavorite(scope); 

    scope.markAs = function(type) { 
     switch(type) { 
     case true : 
      FavoriteService.setFav(scope); 
      break; 
     case false : 
      FavoriteService.deleteFav(scope); 
      break; 

     } 
     scope.isFavorite = type; 
    } 

} 

    }; 

    }]); 

AlbumDirective.html

 <button ng-click="markAs(!isFavorite)" ><i class="fa" ng-class="{'fa-heart' : isFavorite , 'fa-heart-o' : !isFavorite }"></i></button> 

Itempage.html

<album-directive album-id="1"></album-directive> 

當我點擊按鈕心臟在ItemPage.html項目1按鈕被激活,當我再次導航到ItemPage.html項目2按鈕已經active.In每個項目頁面我都有{{object.itemid}}。我想將itemid添加到本地存儲中,因此只有當按鈕按下每個項目時,按鈕纔會處於活動狀態。我從來沒有使用本地storage.Any建議?謝謝先進。

+0

什麼是項目ID爲ITEM2?您的示例似乎工作正常,只要每個項目具有不同的ID,就不應該有任何問題 – S4beR

+0

項目1有itemid = 1,item1有itemid = 2當我在itempage並查看項目1並單擊按鈕將item1設置爲收藏即可使用。但是,當我回到ang時,請轉到itempage.html以查看item2,此按鈕已處於活動狀態。所以所有項目只有一個狀態(活動或不活動)。我需要每個項目的一個狀態。 –

回答

0

安東尼,

角服務是單身,因此通過應用程序的生命週期被實例化一次。這意味着它們非常適合跨控制器存儲和共享數據。

本地存儲

The localStorage object店無到期日的數據。瀏覽器關閉時數據不會被刪除,並且將在第二天,一週或一年內提供。

因此,行爲。打開多個網頁將訪問相同的本地存儲,本身是一個單身。

區別在於,使用角度,每個打開的頁面都有自己的應用程序實例。因此,每個網頁都會擁有自己的服務實例。

解決方案

Here is the plunker

守則

angular.module("MyApp").service("FavoriteService",[function(){ 


    this.fav = 0; 

    //Favorites functions 
    this.isLocalStorageEnable = function() { 

     if(typeof (Storage) !== "undefined"){ 
      return true; 
     } 
     else{ 
      return false; 
     } 
    }; 

    this.isFavorite = function(scope){ 
     return this.fav === 1; 
    }; 

    this.setFav = function(){ 
     this.fav = 1; 

    }; 

    this.resetFav = function(){ 
     this.fav = 0; 

    }; 

}]); 
+0

謝謝你的回答。這個解決方案沒有解決問題。我已經有同樣的問題(該按鈕在所有頁面中都處於活動狀態),現在該按鈕處於活動狀態,並且再次單擊時保持活動狀態。 –

+0

我在Chrome中使用了plunker,它的功能就像一個魅力。你是否使用這個plunker:http://plnkr.co/edit/MdtaYFTIKdiFz4csTF5O?p=preview –

+0

是的。當我點擊按鈕變爲活動,然後是所有項目的活躍 –