查看不再立即更新以努力清理范围汤

Question

我已经成为自我强加的 $scope 汤的受害者，我正在采取措施纠正这个问题。我在这里采用了 Josh Carroll 在他的文章中所写的一些方法：
http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html.

More information on this approach can be found here as well:
https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

这种方法已经以其更面向对象的风格带来了一股清新的空气，并带来了一种更简洁、更易于管理的方法。

但是，我遇到了一个具体问题：视图没有像以前那样立即更新。我 怀疑它与 _this 所引用的内容有关：$scope vs controller vs window.

调用ctrl.addTask()时，一条新的任务记录成功插入到数据库中。但是，新任务不会通过 ng-repeat（通过新的 getTasks() 调用调用）立即出现在视图中，并且只会在手动页面刷新后显示。我的困惑是在页面上放置了另一个按钮，只是为了测试目的，它专门调用 getTasks()，并且它每次都会立即用新任务更新视图。

index.html:

<section ng-controller="TaskCtrl as ctrl">
    <div class="container">
        <form name="addTaskForm">
            <div class="form-group">
                <input type="text" class="form-control" name="taskName" ng-model="ctrl.addTaskData.taskName" placeholder="New Task Name" ng-focus="addNewClicked">
                <div class="form-group-btn">
                    <button class="btn btn-default" type="submit" ng-click="ctrl.addTask();"><i class="glyphicon glyphicon-plus"></i>&nbsp;Add New Task</button>
                </div>
        </form>
    </div>
</section>
<section ng-controller="TaskCtrl as ctrl">
    <div class="row" ng-repeat="task in ctrl.tasksData" repeatdirective>
        <div class="col-xs-12 vcenter">
            <a href="/task/{{ task.id }}">{{ task.name || "Error - Task Names Should Not be Empty" }}</a>
        </div>
    </div>
</section>

app.js

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

var TasksCtrl = function($filter, $scope, $window, $http, $location) {

    var _this = this;

    _this.getTasks = function() {
        var request = $http({
            method      : 'POST',
            url         : '/handler.php',
            data        : {
                'action' : 'getAllTasks'
            },
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            responseType: 'json'
        }).then(function successCallback(response) {
            _this.tasksData = response.data;
            console.log( "getTasks() successCallback" );
        }, function errorCallback(response) {
            console.log( "getTasks() errorCallback" );
        });
    };
    _this.getTasks();

    _this.addTaskData = {};
    _this.addTask = function() {
        var request = $http({
            method      : 'POST',
            url         : '/handler.php',
            data        : {
                'action'                : 'addTask',
                'taskName'              : _this.addTaskData.taskName,
                'startDate'             : '',
                'endDate'               : ''
            },
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded' 
            },
            responseType: 'json'
        }).then(function successCallback(response) {
            console.log("addTask() successCallback");
            _this.getTasks();
            _this.addTaskForm.$setPristine();
            _this.addTaskData = {};
        }, function errorCallback(response) {
            console.log("addTask() errorCallback");
        });         
    };
}

TaskCtrl.$inject = ['$filter', '$scope', '$window', '$http', '$location'];
app.controller('TaskCtrl', TaskCtrl);

我知道建议将 http 删除到它自己的服务，该服务绑定回控制器。这是我努力进一步清理我的 $scope soup 的后续步骤之一。

尝试解决问题的补救措施：

使用 .bind() 方法 "pass" _this 的值仍然引用控制器
使用函数调用创建的闭包，所以“_this”仍然引用控制器
使用 $scope.$apply() — 我每次尝试集成它总是返回 $apply() 未定义的错误。

请注意，上面列出的三种方法中的任何一种完全有可能没有得到正确实施。另请注意，大部分代码已被删减以专注于特定问题。

非常感谢任何和所有指导或反馈！

Answer 1

检查您的 html - 您有 2 个 <section> 标签和 2 个 ng-controller=TaskCtrl as ctrl，所以您有 2 个 TaskCtrl 实例。首先是处理添加新任务，另一个是负责打印它们。

当您调用 addtask 时，从第一个控制器调用 getTask 并在第一个控制器中更新 taskData。

当您只有一个 ng-controller 时，它会起作用。

<section ng-controller="TaskCtrl as ctrl">
    <div class="container">
        <form name="addTaskForm">
            <div class="form-group">
                <input type="text" class="form-control" name="taskName" ng-model="ctrl.addTaskData.taskName" placeholder="New Task Name" ng-focus="addNewClicked">
                <div class="form-group-btn">
                    <button class="btn btn-default" type="submit" ng-click="ctrl.addTask();"><i class="glyphicon glyphicon-plus"></i>&nbsp;Add New Task</button>
                </div>
        </form>
    </div>
    <div class="row" ng-repeat="task in ctrl.tasksData" repeatdirective>
        <div class="col-xs-12 vcenter">
            <a href="/task/{{ task.id }}">{{ task.name || "Error - Task Names Should Not be Empty" }}</a>
        </div>
    </div>
</section>

您还可以使用服务来存储数据并将其注入两个控制器，这样数据将仅存储在此服务中并可以共享。

查看不再立即更新以努力清理范围汤

View No Longer Updating Immediately in Efforts to Clean Up Scope Soup

javascript

oop

angularjs

angularjs-scope

angularjs-http