Question

我有一个指令，它在加载时通过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>');
        });
      };
    }

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

Answer 1

我会推荐@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

Answer 2

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

例如，您的模板可能是

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

您不需要compile功能或重新加载指令＆＃34;实现这一目标。您发布的解决方案是一种角度重新实现。看起来你想要下载一个已插入数据的模板，但如果你将模板与数据分开并让Angular在客户端上插入它，Angular会对你有所帮助。

重新加载控制器事件的指令

2 个答案:

重新加载控制器事件的​​指令

2 个答案:

重新加载控制器事件的指令