Javascript 单击div时如何删除筛选器

我想在页面上显示许多电话号码，每个号码最初都显示为“短”电话

您可以看到，我不知道如何定义

showFull

方法

如何定义它，或给出任何其他简单的解决方案（例如编写指令）

PS：这里有一个工作演示：

我创建了一个指令

这是一个链接函数，它将根据div的切换状态应用

shortFilter

。我还实现了一个

scope.$watch

函数，因此对模型的更改仍将应用于指令。这是一个粗略的代码，但我不确定的性能

function link(scope, element) {
    var isFilterLabel = true;

    scope.$watch("model", function() {
        updateText();
    });

    element.on('click', function(event) {
        isFilterLabel = !isFilterLabel;
        updateText();
    });

    var updateText = function() {
        console.log(scope.model);
        var text = isFilterLabel ? shortFilter(scope.model) : scope.model;
        element.text(text);  
    }
}

angular.module("app", [])
.filter("short", function() {
  return function(input) {
    return input.toString().substring(0,3) +"...";
  };
})
.controller("MyCtrl", function($scope) {
  $scope.phone1 = 1111111;
  $scope.phone2 = 2222222;
  $scope.phone3 = 3333333;
  $scope.phone4 = 4444444;
  $scope.phone5 = 5555555;

  $scope.showFull = function() {
    ???
  }
});

function link(scope, element) {
    var isFilterLabel = true;

    scope.$watch("model", function() {
        updateText();
    });

    element.on('click', function(event) {
        isFilterLabel = !isFilterLabel;
        updateText();
    });

    var updateText = function() {
        console.log(scope.model);
        var text = isFilterLabel ? shortFilter(scope.model) : scope.model;
        element.text(text);  
    }
}