Is it possible to set ng-view to replace: true?

问题

I'm integrating Angular into a web application and I noticed that the wrapper is messing with some of the CSS on the page. After researching into directives, I saw that custom directives can have a property called 'replace' to be set to true so that the templateUrl directly replaces instead of being wrapped in the directive's tags.

Is there a way to do the same with ng-view, or more generally any Angular directive? Thanks for the help!

回答1:

I think your best bet is to decorate the original ng-view directive and add the replace:true switch to it. Note, replace is going to be - hah - replaced in the next major version of angularjs, but for now, this will work:

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

        return $delegate;
    });
});

And of course, the jsFiddle: Here

回答2:

Is there a way to do the same with ng-view

I can't think of a way of doing that without editing the source of Angular or something. replace is for custom directives, not (necessarily) the built in ones.

or more generally any Angular directive? Thanks for the help!

Same thing. But you wouldn't want to do it with any directive, seeing how you could have multiple directives in a single element. I suppose you may want to do it with all template'd directives (since I think you can only have one per element), but, again, without editing the source of the directive I can't think of a way to do that.

Also, note that Angular has stated that replace "will be removed in next major release", so it's probably not best to rely on it.

You can, however, if you wish, create you own ngInclude/ngView-esque directive that renders templates without a wrapping tag.

A naive and probably problematic one (or at least inefficient) might look like:

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

My first advice would be to adapt your css to angular if you want to use angular.

My other advice would to do your entire application in angular, and not add it after the fact.

来源：https://stackoverflow.com/questions/25353822/is-it-possible-to-set-ng-view-to-replace-true