Question

我希望我的指令存储上次点击的时间并记住通过路径/视图更改。

通常这很容易，因为指令通常显示来自持久性模型的数据。我很高兴这样做，但没有身份证或其他什么，我不知道如何找回正确指令的时间。

换句话说，我希望能够做到这一点：

<clicktime>Last Clicked:</clicktime>
<clicktime>Last Clicked:</clicktime>

但我能想到的唯一方法是给每个指令实例一个唯一的id，然后使用它来存储上次点击的时间（在服务中）。像这样：

//html
<clicktime myID="c1">Last Clicked:</clicktime>
<clicktime myID="c2">Last Clicked:</clicktime>

//directive
template: '<div><button href="#" ng-click="click()" class="button">
           <span ng-transclude></span> {{clicked}}</button></div>',
link: function(scope, element){

   //Use the myID to retrieve the last clicked time from a service
   scope.clicked = scope.getLastClicked(attrs.myID);

   scope.click = function(){
     var now = new Date();
     scope.clicked = now;
     //store the last clicked time
     scope.setLastClicked(attrs.myID, now);
   }
}

要求手动分配的ID很糟糕，但我不知道如何避免它。

这是问题的一个问题。如果您点击按钮，点击其他页面，然后点击返回主页，我希望有时间记住。

http://plnkr.co/edit/c8ZPNDWv8HuXbpzavTSq?p=preview

Answer 1

此解决方案确实保留了手动分配的ID，但除非数据需要与应用程序的其他部分共享，或者在整页刷新后仍然存在，否则我可能会避免使用服务，为简单起见，只需使用简单的缓存对象在指令定义中：

myApp.directive('clicktime', function(){
  cache = [];
  return {
    transclude:true,
    restrict: 'E',
    scope: true,
    template: '<div><button href="#" ng-click="click()" class="button"><span ng-transclude></span> {{clicked}}</button></div>',
    link: function(scope, element, attrs){
      scope.clicked = cache[attrs.clicktimeId] || 'never';
      scope.click = function(){
        cache[attrs.clicktimeId] = new Date();
        scope.clicked = cache[attrs.clicktimeId];
      };
    }
  };
});

用作

<clicktime clicktime-id="1">Last Clicked: </clicktime>

可以在http://plnkr.co/edit/B7B0SLAZLXHezYrbCIIx?p=preview

工作

Answer 2

如果每条路线最多有一条指令（诚然，您的问题表明不是这种情况），并准备使用ui-router，您可以使用州名作为ID该指令由$state.current.name访问：

myApp.directive('clicktime', function($state){
  cache = [];
  return {
    transclude:true,
    restrict: 'E',
    scope: true,
    template: '<div><button href="#" ng-click="click()" class="button"><span ng-transclude></span> {{clicked}}</button></div>',
    link: function(scope, element, attrs){
      var id = $state.current.name;
      scope.clicked = cache[id] || 'never';
      scope.click = function(){
        cache[id] = new Date();
        scope.clicked = cache[id];
      };
    } 
  };
});

在路线变化之间记住状态的指令？

2 个答案: