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>

ビューでは、4 回呼び出していることがわかります。これは、{{ctrl.count()}}計算が 4 回行われていることを意味します。計算を 1 回だけ実行して、値を複数回表示するにはどうすればよいですか?

のようなアイデアを提案しないでください。ctrl.list配列をコントローラーの一部にしてから、ビューで使用します{{ctrl.list.length}}。このアイデアは、たとえば、複雑な計算が必要な場合には機能しません。

4

4 に答える 4

-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>

これはあなたの質問に対する1つのオプションの解決策です:)

角度のあるバージョン コードでこの問題を解決する方法については、 Plunkerを参照してください。

于 2015-09-21T10:38:33.927 に答える