Question

您有一个控制器，在其范围内公开的模型，用户可以在模板中操作，控制器中的一个函数作用于该模型，模板中的单击处理程序将调用该模型。您何时以及为何愿意选择：

通过模板
在范围

编辑：在John Lindquist的this video中，他主张使用第一种形式，声称它使测试变得更容易。我同意这一点，因为如果传入一个参数，对控制器方法的测试可能更具可读性。

模板：

<div ng-app="myApp">
    <div class="container demo-container" ng-controller="MyCtrl">

        <label for="model_input">
            Model:
            <input type="text" class="form-control" ng-model="model" name="model_input"/>
        </label>

        <p>
            Invoke function with <strong>'{{model}}'</strong> explicitly through template
        </p>
        <button class="btn btn-primary" ng-click="fn_through_tpl(model)">
            Click
        </button>

        <p>
            Invoke function with <strong>'{{model}}'</strong> implicitly through controller
        </p>
        <button class="btn btn-primary" ng-click="fn_through_ctrl()">
            Click
        </button>

    </div>
</div>

控制器：

angular.module('myApp', [])

.controller('MyCtrl', function ($scope) {
    $scope.model = "my model";

    $scope.fn_through_tpl = function (model) {
        alert(model + " through template!");
    }

    $scope.fn_through_ctrl = function () {
        alert($scope.model + " through $scope!");
    }
});

Answer 1

在你的例子中，我推荐后者 - 你通过控制器调用的功能。使用双向数据绑定时，无需将模型传回，因为它已经更新。这对读者来说是多余的，令人困惑。相反，调用控制器上作用于模型的行为。

我认为当模型是或包含数组时，前一种模式是合适的，并且您希望公开作用于数组元素的控制器操作。例如：

<div ng-repeat="comment in post.comments">
    {{ comment.message }}
    <button ng-click="deleteComment(comment)">Delete comment</button>
</div>

AngularJS：在$ scope-exposed，控制器定义的模型上调用$ scope-exposed，controller-defined函数的首选方法

1 个答案: