0

在我看来，我想多次显示一个计算属性，如果我{{ctrl.Compute()}}多次显示，那么计算函数会被多次调用。

我创建了这个 plunkr 演示只是为了我的问题 http://plnkr.co/edit/TcMcJUipLKk94dthnivU

控制器

app.controller('MainController',function(){
  var ctrl= this;
  var list = [];

  ctrl.count = function(){
    console.log('Invoked');
    return list.length
  }


  ctrl.add = function(){
    list.push(1)
  }

});

看法

 <body ng-controller="MainController as ctrl">
    <button ng-click="ctrl.add()">Add</button>
    <br>
    List Size: {{ctrl.count()}} <br>
    List Size: {{ctrl.count()}} <br>
    List Size: {{ctrl.count()}} <br>
    List Size: {{ctrl.count()}} <br>
  </body>

在视图中，您可以看到我调用{{ctrl.count()}}了四次，这意味着计算发生了四次。我怎样才能只计算一次并多次显示一个值。？

请不要建议，像这样的想法，让数组成为控制器的一部分ctrl.list，然后在视图中使用{{ctrl.list.length}}。这个想法可能适用于此，但在需要复杂计算的情况下不起作用。

4

4 回答 4

0

检查Plunker。在范围上使用新变量，例如：

ctrl.counter = ctrl.count();
$scope.$watch(function () {
  return list;
}, function () {
  ctrl.counter = ctrl.count();
}, true);

在 HTML 上：

List Size: {{ctrl.counter}} <br>
List Size: {{ctrl.counter}} <br>
List Size: {{ctrl.counter}} <br>
List Size: {{ctrl.counter}} <br>

该$watch函数 监视value 的每一次变化list，并每次调用回调函数。

于 2015-09-21T10:02:41.153 回答
0

您可以使用一种称为记忆的技术。

在计算中，记忆是一种优化技术，主要用于通过存储昂贵的函数调用的结果并在再次出现相同的输入时返回缓存的结果来加速计算机程序。

您可以使用像lodash这样的流行库，也可以自己编写（不鼓励）。

您可以在此处找到与您的用例类似的使用示例，讨论计算量大的过滤器，类似于使用绑定到计算函数。

于 2015-09-21T10:06:40.503 回答
0

也许是这样的：

var savedCount = ctrl.count();
ctrl.count = function(){
    console.log('Invoked');
    return list.length
}

$scope.$watch("list", function() {savedCount = ctrl.count()});
于 2015-09-21T10:01:57.993 回答
-1

您可以使用bindHtmlUnsafe指令来做到这一点，而且您的 count 对象应该是一个 $scope 对象，那么它是可能的。请复制粘贴我的答案。 

    app.controller('MainController',function($scope){
     $scope.list = [];  

      $scope.context = '<br/> List Size: ' +
       $scope.list.length + ' <br/>List Size: ' + $scope.list.length + 
      '<br/>List Size: ' + $scope.list.length + ' <br/> List Size: ' + 
        $scope.list.length + ' <br/>';

     $scope.add = function () {
        $scope.list.push(1);
        $scope.context = '<br/> List Size: ' + $scope.list.length + ' <br/>List  
        Size: ' + $scope.list.length + '<br/>List Size: ' + $scope.list.length + 
       '<br/> List Size: ' + $scope.list.length + ' <br/>';
    }    
  });

app.directive('bindHtmlUnsafe', function ($compile) {
    return function ($scope, $element, $attrs) {

        var compile = function (newHTML) { // Create re-useable compile function
            newHTML = $compile(newHTML)($scope); // Compile html
            $element.html('').append(newHTML); // Clear and append it
        };

        var htmlName = $attrs.bindHtmlUnsafe; // Get the name of the variable 
        // Where the HTML is stored

        $scope.$watch(htmlName, function (newHTML) { // Watch for changes to 
            // the HTML
            if (!newHTML) return;
            compile(newHTML);   // Compile it
        });

    };
});

然后

<body ng-controller="MainController">
      <button ng-click="add()">Add</button>
            <div bind-html-unsafe="context"></div>
  </body>

这是您问题的一个可选解决方案:)

请在Plunker中查看如何使用您的角度版本代码解决此问题。

于 2015-09-21T10:38:33.927 回答