Question

我正在将Angular集成到Web应用程序中，我注意到包装器正在弄乱页面上的一些CSS。在研究了指令之后，我看到自定义指令可以将一个名为'replace'的属性设置为true，这样templateUrl就可以直接替换而不是包含在指令的标签中。

有没有办法用ng-view或更一般的任何Angular指令做同样的事情？谢谢你的帮助！

Answer 1

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

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

        return $delegate;
    });
});

当然，jsFiddle：Here

Answer 2

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

如果不编辑Angular的源代码，我就无法想到这样做的方法。 replace用于自定义指令，而不是（必然）内置指令。

或更一般的任何Angular指令？谢谢你的帮助！

同样的事情。但是你不想用任何指令来做这件事，看看如何在一个元素中有多个指令。我想你可能想要用所有的模板指令（因为我认为每个元素只能有一个），但是，再一次，如果没有编辑指令的来源，我就不能想到一种方法这样做。

另外，请注意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

我的第一个建议是如果你想使用角度，你的css会适应角度。

我的其他建议是以角度完成整个应用程序，而不是在事后添加它。

是否可以将ng-view设置为replace：true？

2 个答案: