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

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.htmland$compile语句不在 ajaxsuccess回调中，那么一切都会按预期编译。

Answer 1

使用 jQuery 的ajax. 放弃它以支持 AngularJS $http，你就不需要打电话了$apply（就像$http会为你做的那样！）。

简而言之 -除非你有非常特殊的理由使用 jQuery 的ajaxdrop it and use $httpinstead。

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);
            });
          }
        }
      );
    };
  });
});