是否可以将 ng-view 设置为替换：true？答案

【问题标题】：Is it possible to set ng-view to replace: true?是否可以将 ng-view 设置为替换：true？
【发布时间】：2014-08-17 21:32:00
【问题描述】：

我正在将 Angular 集成到一个 Web 应用程序中，我注意到包装器与页面上的一些 CSS 混淆了。在研究了指令之后，我看到自定义指令可以有一个名为“replace”的属性设置为 true，以便 templateUrl 直接替换而不是被包裹在指令的标签中。

有没有办法对 ng-view 或者更一般的 Angular 指令做同样的事情？感谢您的帮助！

【问题讨论】：

我会告诫不要在自定义指令中使用“替换”。 v1.X 中仍然支持该属性，但将在 Angular 的下一个主要版本中删除（弃用）。

标签： angularjs angularjs-directive

【解决方案1】：

我认为你最好的办法是装饰原来的ng-view 指令并添加replace:true 开关。请注意，在 angularjs 的下一个主要版本中，replace 将被 - 哈哈 - 替换，但现在，这将起作用：

app.config(function($provide) {
    $provide.decorator('ngViewDirective', function($delegate) {
        var directive = $delegate[0];
        directive.replace = true;

        return $delegate;
    });
});

当然还有 jsFiddle：Here

【讨论】：

这可能是正确的答案 - 它在技术上确实改变了该属性 - 但它对我没有预期的效果（使用 Angular 1.4）。
是的。这是在 1.2 或 1.3 上测试的。我不知道 1.4 会发生什么。

【解决方案2】：

有没有办法用 ng-view 做同样的事情

如果不编辑 Angular 的源代码或其他东西，我想不出办法。 replace 用于 custom 指令，而不是（必然）内置指令。

或更一般地说，任何 Angular 指令？感谢您的帮助！

同样的事情。但是你不会想用 any 指令来做，看看你如何在一个元素中拥有多个指令。我想您可能希望使用所有模板指令来执行此操作（因为我认为每个元素只能有一个），但是，再次，如果不编辑指令的源，我想不出一种方法来做到这一点。

另外，请注意 Angular 已声明替换 "will be removed in next major release"，因此最好不要依赖它。

但是，如果您愿意，您可以创建自己的 ngInclude/ngView-esque 指令，该指令在没有包装标签的情况下呈现模板。

一个幼稚且可能有问题的（或至少是低效的）可能看起来像：

app.directive('myRender', function ($compile, $http) {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      var newScope;
      var newElement;

      attrs.$observe('url', function (value) {
        if (value) {
          $http.get(value).then(function (result) {
            if (newElement !== undefined) {
              newElement.remove(); 
            }
            newElement = angular.element(result.data);

            if (newScope !== undefined) {
              newScope.$destroy();
            }
            newScope = scope.$new();

            $compile(newElement)(newScope);
            element.parent().append(newElement);
          });
        }
      })
    }
  }
});

http://plnkr.co/edit/Vm96f2rQsT2PX1C3rgK8?p=preview

如果你想使用 angular，我的第一个建议是让你的 css 适应 angular。

我的另一个建议是使用 Angular 完成整个应用程序，而不是事后添加。

【讨论】：