javascript - 在 AngularJS 中成功的 http 请求上创建 DOM 元素

Question

我已经在作用域中使用函数 createDOMWallPost 定义了一个指令。如果 http 请求顺利(服务器响应“OK”)，该函数会将 newWallPost 附加到具有 dynamic-wall 属性的元素

angular.module('p2l.directives', []).directive('dynamicWall', function(){
    return function(scope, element, attrs){
        scope.createDOMWallPost = function(newWallPost){
            $(element).append(newWallPost);
        }
    }
});

在 Controller 中我有

var newWallPost = $scope.newWallPost;
$http.post("/backend/newWallPost",
    {
        newWallPost : newWallPost
    }).success(function(data){
        if(data == "OK"){
            $scope.createDOMWallPost(newWallPost);
        }
    });

这可行，但感觉不是完成此任务的正确方法。还有哪些其他技术可以用于此目的？

Answer 1

你所做的更多是jquery方式，而不是 Angular 方式。 正如钱德马尼在评论中所说。跳过该指令，当您发布新的 wallPost 返回 json 数据(包括来自 API 的所有帖子)时，将返回的数据保存到 $scope 变量中，并使用 ng-repeat 使用新帖子更新 DOM。

此外，在创建不会在模板中执行的函数时，您不需要使用 $scope.varName = function(){} 。

一些快速伪代码

#Controller
var newWallPost = $scope.newWallPost;
$http.post("/backend/newWallPost",
    {
        newWallPost : newWallPost
    }).success(function(data){
        if(data == "OK"){
            $scope.wallPosts = data;
        }
    });

#Template
<p ng-repeat="post in wallPosts">{{ post.jsonKey }}</p>