Question

问题的示例代码 Is Here！

我有一些字段的计算数据。我在我的示例中使用“总计”方法获取数据。我知道当控制器初始化一次然后再次获取值本身时，将调用该函数。但是我意识到当按下单击按钮执行编译功能时，每次调用“total”函数两次。总计与编译或编译中使用的数据无关。这些无用（我的情况:)）调用的原因是什么？

// JS CODE

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
$scope.val1 = 1;
$scope.val2 = 2;

$scope.serverData = 99;



$scope.total = function() {
   console.log('I am total');
    return $scope.val1 + $scope.val2;
}



$scope.compileData = function(){
    var injector = angular.element($('#serverDataHere')).injector(), 
        compile =injector.get('$compile');

      $('#serverDataHere').append(compile('<div>{{serverData}}</div>')($scope));

};

}

//// HTML CODE

    <div ng-controller="MyCtrl">
    <table border="1">
        <tbody>
            <tr>
                <td>{{val1}}</td>
                <td>{{val2}}</td>
                <td>{{total()}}</td>
                <td>{{total()}}</td>
                <td>{{total()}}</td>
            </tr>
            <tr>
                <td>Computer</td>
                <td>Computer</td>
                <td>Computer</td>
                <td id="serverDataHere"></td>
                <td>X Games</td>
            </tr>
        </tbody>
    </table>
    <button ng-click="compileData()">Compile Data</button>
</div>

Answer 1

您正在开始一个摘要周期，在您的网页上运行所有评估。 {{ }}。

另一方面，您不应该在控制器中执行DOM操作，这就是存在指令的原因。也没有理由直接从模块访问$ injector，$ compile或任何服务。你应该使用标准注射Angular注入它们。

myApp.controler('controllerName', function($scope, $compile) {
    return ctrlFunctions;
});

Answer 2

（不确定我是否理解你的问题。）

但是您可以在控制器中运行一次total（）函数，将其分配给范围变量，然后将其绑定到视图。

var totalFcn = function() {
    console.log('I am total');
    return $scope.val1 + $scope.val2;
}

$scope.total = totalFcn();

然后在你的视图中，只需输入total变量而不是函数调用。

<td>{{total}}</td>

编译时调用Angular值函数

2 个答案: