Html 使用AngularJS在localStorage中创建保存状态的收藏夹按钮

我正在尝试为我的AngularJS应用程序创建一个最喜欢的按钮。其想法是，当用户单击按钮时，按钮图像会发生变化，让用户知道它选择了相册作为收藏夹。我想补充一点，我对框架和web开发都是新手，所以任何反馈和建议都将不胜感激

这是我的服务代码：

angular
.module("jeviteca")
.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);

    };


}]);

这是我使用的指令

angular.module("jeviteca").directive("albumDirectiveTabla",    ["FavoriteService", function(FavoriteService) {

return {
    restrict: "AE",
    templateUrl: "views/AlbumDirectiveTabla.html",
    replace: true,
    scope: {
        model: "="
    },
    link: function(scope)
    {
        scope.isLocalStorageEnable = FavoriteService.isLocalStorageEnable;
        scope.isFavorite = FavoriteService.isFavorite(scope);
        scope.setFav = FavoriteService.setFav(scope);
        scope.deleteFav = FavoriteService.deleteFav(scope);

    }

};

}]);

这是我的观点-->.html

<tr>
<td><img ng-src="vendor/resources/img/{{::model.image}}" width="50" height="50" class="img-circle"></td>
<td>{{::model.title}}</td>
<td>{{::model.year}}</td>
<td>{{::model.band.name}}</td>
<td>{{::model.genre.name}}</td>
<td>
   <ul>
       <li ng-hide="isLocalStorageEnable()"> Local Storage not enabled </li>
       <button ng-click="deleteFav()" ng-show="isFavorite()" class="glyphicon glyphicon-heart"></button>
       <button ng-click="setFav()" ng-hide="isFavorite()" class="glyphicon glyphicon-heart-empty"></button>
   </ul>
</td>

<td ng-repeat="track in model.tracklist">
    <ul>
         <li>
          {{track}}
        </li>
    </ul>

</td>
</tr>

{{：：model.title}
{{：：model.year}
{{：：model.band.name}
{{：：model.genre.name}

未启用本地存储



{{track}}

首先，我建议您在本地存储不可用时使用cookie，这样您就不必检查存储是否已启用，因为它将存储在cookie中

其次，有了这个建筑，angular不知道有什么改变了

 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 true : 
              FavoriteService.deleteFav(scope);
              break;

          }
          scope.isFavorite = type;
        }

    }

模板

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

让我知道它是否有效

---

仍然不工作。我认为指令中没有定义范围。还有，为什么在switch的情况下，case true被复制了？您甚至在console.log或chrome断点中检查了它是否未定义？我创建了工作的plunkr。明白了，你的解决方案运行得很好，我遇到了一个关于存储数据的密钥的问题+100请使用twitter引导标签。引导是当应用程序启动或通过web收到请求时运行的一系列过程。