Question

我需要在呼叫成功时将data发送到指令...这是我的控制器的ajax调用：

$scope.items ={
                avatar: ""
 };
$scope.addComment = function(segment) {
    commentFactory.saveComment($scope.form.comment,segment,0,0)
    .success(function(data){
        $scope.items.avatar = data.avatar;
    })
    .error(function(data){
       console.log(data); 
    });

    // Reset the form once values have been consumed.
    $scope.form.comment = "";
};

这里有2个指令首次用于提交表单和ajax req，第二个用于更新客户端的内容。我需要在第二个指令中加载内容形式ajax ...问题现在是指令而不是等待ajax完成调用...

.directive("addcomment", function(){
    return {
        restrict: "E",
        template: '<input type="submit" addcomments class="btn btn-default pull-right" value="Send" />'
    };
})

.directive("addcomments", function($compile){
    return {
        link: function (scope, element, attrs) {
            var html = '<div>'+scope.items.avatar+'</div>';

            element.bind("click", function(){
                angular.element(document.getElementById('space-for-new-comment'))
                            .append($compile(html)(scope));
            })  
        }
    };
});

对此有何解决方案？

Answer 1

我只是想告诉你另一种写作方式：你想在html中写一些评论，好吧：

<div class="smartdivforcomments">
    <div ng-repeat="comment in newComments">
        {{comment.avatar}}
    </div>
</div>

在控制器中：$scope.newComments = []; 添加评论的功能：

commentFactory.saveComment($scope.form.comment,segment,0,0)
.success(function(data){
    $scope.newComments.push({avatar : data.avatar});
})
.error(function(data){
   console.log(data); 
});

回答您对上一个问题的评论：绑定到非角度的点击事件，因此您需要使用scope.apply来正确更新您的视图。

Answer 2

在addcomments指令中使用监视并等待控制器范围变量items.avatar被定义。

.directive("addcomments", function($compile){
  return {
    link: function (scope, element, attrs) {

      scope.$watch('items.avatar', function(newVal, oldVal) {
        // wait for async to finish
        if(scope.items.avatar === undefined) return;

        // loaded, do work now
        var html = '<div>'+scope.items.avatar+'</div>';

        element.bind("click", function() {
          angular.element(document.getElementById('space-for-new-comment'))
          .append($compile(html)(scope));
        });          
      });
    }
  };
});

如何从ajax调用AngularJS将数据从控制器传递到指令

2 个答案: