Javascript angularjs ng显示绑定不'；不能使用jQuery

我有一些重复的问题

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

当我单击“编辑”时，会出现编辑字段和保存、取消按钮。 当我点击“取消”时，它消失了。

---

当我单击“保存”字段保存到数据库时，方法

disableEditor

在同一对象上执行，我检查了

Id

属性，在调试器中显示

editorEnabled

为false，但在我的浏览器中仍然存在保存、取消按钮和字段以进行编辑。我再次单击“保存”，它就消失了。

您应该尝试使用

$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

就是这样工作的。这需要角度1.4+

---

注意，虽然可以使用

$.ajax

然后将成功代码包装到

$timeout

或

$scope.$apply（）

，但最好使用Angular自己的

$http

这不起作用，因为您在

$scope.saveEditor

中所做的一切都发生在Angular之外（我假设

$

是jQuery）。这根本不是角度的方式

---

您应该更深入地研究angular HTTP服务，并改用它。

每次使用非Anid已经提到的“angular way”时，您都需要使用$apply

---

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

，因为您使用的是

$.ajax

，这需要使用

$apply

来通知angular更新视图。使用

$http

，问题将消失，因为它在内部管理$apply谢谢，很抱歉提出了一个简单的问题。更多com请回答我的问题。同样值得一提的是，仍然可以使用jQuery，但不推荐使用。

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);
});