1

我有一个指令，它在加载时通​​过 ajax 获取数据。但是在控制器中发布一些数据的事件之后，指令应该使用新的 ajax 数据重新编译，以便可以反映更改。你能帮忙吗？

我在指令中有一个编译函数，它获取数据并将其放入 HTML 文件并生成标记。

然后我在控制器中有一个保存评论功能，它保存了一条新评论，因此指令获取了新数据。

compile: function(tElement, tAttrs) {
      var templateLoader = $http.get(base_url + 'test?ticket=' + $routeParams.ticketid, {cache: $templateCache})
          .success(function(htmlComment) {
            if (htmlComment != '')
              tElement.html(htmlComment);
            else
              tElement.html('');
          });
      return function (scope, element, attrs) {
        templateLoader.then(function (templateText) {
          if (tElement.html() != '')
            element.html($compile(tElement.html())(scope));
          else
            element.html('<div class="no-comments comment"><p>Be the first to comment</p></div>');
        });
      };
    }

这是指令的编译部分。我希望通过正常的控制器事件调用它。

4

2 回答 2

2

我会推荐@Riley Lark 的回复，但正如您已经提到的，您的 API 返回的是 HTML 而不是 JSON，这是我的看法。

您的控制器为：

<div ng-controller="MyCtrl">
    <button ng-click="save()">Save Comment</button>
    <comments></comments>
</div>


myApp.controller('MyCtrl', function($scope) {
  $scope.commentHTML = '';
  $scope.alert = function(salt) {
    alert('You clicked, My Comment ' + salt);
  }
  $scope.save = function() {
    // this imitates an AJAX call
    var salt = Math.random(1000);
    $scope.commentHTML+= '<div ng-click="alert(' + salt + ')">My Comment ' + salt + '</div>';    
  };
});

评论指令为：

myApp.directive('comments', function($compile) {
  return {
    restrict: 'E',
    link: function(scope, element) {
      scope.$watch(function() { return scope.commentHTML; }, function(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          element.html(newVal);
          $compile(element)(scope);
        }
      });
    }
  }
});

希望这能解决你的问题..！

Working Demo

于 2014-05-29T17:20:37.443 回答
0

获取所需数据后，将数据放入$scope属性中。根据该属性定义您的模板，它会在数据返回时自动更改。

例如，您的模板可能是

<div ng-repeat="comment in comments">
    {{comment}}
</div>

您不需要compile函数或“重新加载指令”来完成此操作。您发布的解决方案是对 Angular.js 的一种重新实现。看起来你想下载一个已经插入数据的模板，但是如果你将模板与数据分开并让 Angular 在客户端上插入它，Angular 会为你提供最大的帮助。

于 2014-05-30T02:28:06.453 回答