Question

我希望有一个相当简单的解决方案。

我有一个从文件加载HTML的指令设置。然后应该使用Angular编译该HTML。指令：

angular.module('wc.directives', [], function($compileProvider) {
  $compileProvider.directive('view', function($compile) {
    return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
           // watch the 'view' expression for changes
          return scope.$eval(attrs.view);
        },
        function(value) {
          // when the 'view' expression changes
          $.ajax({
            url: '/partials/' + value,
            success: function(data) {
              element.html(data);
              $compile(element.contents())(scope);
            }
          });
        }
      );
    };
  });
});

这应该加载（在玉器中）的东西的一个例子

input#nameInput.nameField(ng-model='name', type='text')
h1 {{ name }}

加载页面时，{{name}}可见。但是，当您开始在文本字段中输入内容时，{{name}}会更新您输入的内容。

如果element.html和$compile语句不在ajax success回调中，那么一切都按预期编译。

Answer 1

使用jQuery的ajax让你的生活更加艰难。放弃它支持AngularJS $http，你不需要致电$apply（因为$http会为你做！）。

简而言之 - 除非您有非常特别的理由使用jQuery ajax删除它并使用$http代替。

Answer 2

正如预期的那样，这是一个简单的解决方案。

我只需要在scope.$apply();语句后添加$compile。

编辑：更好的解决方案是使用$http。这是最终的工作代码：

angular.module('wc.directives', [], function($compileProvider) {
  $compileProvider.directive('view', function($compile, $http) {
    return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
           // watch the 'view' expression for changes
          return scope.$eval(attrs.view);
        },
        function(value) {
          // when the 'view' expression changes
          if (value !== null) {
            $http.get('/partials/' + value).success(function(data) {
              element.html(data);
              $compile(element.contents())(scope);
            });
          }
        }
      );
    };
  });
});

在模型更改之前，编译角度不起作用

2 个答案: