angularjs ng-show绑定不适用于jQuery

Question

我有一些ng-repeat

<tr ng-repeat="Picture in Pictures">
    <td>{{Picture.Id}}</td>
    <td>
        <div ng-hide="Picture.editorEnabled">
            {{Picture.Name}}
        </div>
        <div ng-show="Picture.editorEnabled">
            <input ng-model="Picture.editName" class="form-control" ng-show="Picture.editorEnabled">
        </div>
    </td>
    <td>
        <button type="button" name="editButton" class="btn btn-warning" ng-hide="Picture.editorEnabled"
                ng-click="enableEditor(Picture)">Edit
        </button>
        <div ng-show="Picture.editorEnabled">
            <button type="button" name="saveEditButton" class="btn btn-success"
                    ng-click="saveEditor(editName,editImageUrl,Picture)">Save
            </button>
            <button type="button" name="cancelEditButton" class="btn btn-warning" ng-click="disableEditor(Picture)">
                Cancel
            </button>
        </div>
    </td>
</tr>

这是我的控制器代码：

$scope.enableEditor = function(picture) {
    picture.editorEnabled = true;
    picture.editName      = picture.Name;
    picture.editImageUrl  = picture.ImageUrl;
};

$scope.disableEditor = function(picture) {
    picture.editorEnabled = false;
    picture.editName      = null;
    picture.editImageUrl  = null;
};

$scope.saveEditor = function(name, url, picture) {

    $.ajax({
        url: 'admin/pictures/edit/' + picture.Id,
        type: 'POST',
        data: {
            ImageUrl: url,
            Name: name
        },
        success: function() {
            picture.Name     = picture.editName;
            picture.ImageUrl = picture.editImageUrl;
            $scope.disableEditor(picture);
        }
    });
};

当我点击“编辑”时出现编辑字段和保存，取消按钮。 当我点击“取消”时，它会消失。 当我单击“保存”字段保存到DB时，方法disableEditor在同一个对象上执行，我检查了Id属性，在调试器中它显示editorEnabled为false，但在我的浏览器中仍然存在Save，Cancel按钮和字段用于编辑。 我再次点击“保存”，它消失了。

Answer 1

您应该尝试使用$http而不是$.ajax 。 jQuery的$.ajax在Angular的范围之外执行。 回调中的任何代码都不会反映在您的范围内，因为这发生在Angular的摘要周期之外。 请尝试以下方法：

var url = 'admin/pictures/edit/' + picture.Id;

var data = $httpParamSerializerJQLike({
    ImageUrl: url,
    Name: name
});

var config = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
};

$http.post(url, data, config).then(function() {
    picture.Name     = picture.editName;
    picture.ImageUrl = picture.editImageUrl;
    $scope.disableEditor(picture);
});

为此，您需要将$http和$httpParamSerializerJQLike服务注入控制器。 我假设您需要将其作为表单提交，因为默认情况下$.ajax工作方式。 这需要Angular 1.4+。

注意，虽然可以使用$.ajax然后将您的成功代码包装在$timeout或$scope.$apply() ，但最好使用Angular自己的$http 。

Answer 2

这不起作用，因为你在$scope.saveEditor所做的一切都发生在angular之外（我假设$是jQuery）。 这根本不是角度方式。

您应该深入了解https://docs.angularjs.org/api/ng/service/$http有角度的HTTP服务，并使用它来代替。

Answer 3

每次使用非“角度方式”的东西时，你需要使用$ apply，就像Anid已经提到过的那样。

例如，如果您使用jQuery的http而不是angular的$ http，则必须添加$ scope。$ apply。