javascript - 自定义 ngInclude : variable in template not replaced

Question

我正在尝试创建一个指令来加载自定义模板，但如果自定义模板不存在，则加载默认模板。

这是我的代码:

HTML:

<my-include src="path/to/template.html"></my-include>

指令:

angular.module('app')

    .directive("myInclude", function ($compile) {
        return {
            restrict: 'CAE',
            replace: true,
            scope: {
                src: '@',
            },
            link: function (scope, iElement, iAttrs, controller) {
                scope.$on("$includeContentError", function (event, args) {

                    scope.src = args.replace('/custom', '').replace("'", '');
                });
                scope.$on("$includeContentLoaded", function (event, args) {

                    scope.src = args.replace("'", '');
                });
            },
            template: '<div class="include-container" ng-include="src"></div>'
        };
    })
;

我遇到的问题是...我的模板没有显示...当我调试它时，它会转到指令并替换 src。但我得到的 html 如下:

<div class="include-container ng-scope" ng-include="src" src="path/to/template.html"><div class="main-information-content ng-scope">
</div>

知道如何解决这个问题吗？我猜这是因为“ng-include='src'”，其中“src”没有被路径替换...如何修复它？

编辑:

我尝试放置此模板:

template: '<div class="include-container" ng-include="{{ src }}"></div>'

但我收到此错误:

Error: [$parse:syntax] http://errors.angularjs.org/1.5.0/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Brc%20%7D%7D&p4=%7B%src%20%7D%7D

编辑2:当我把它作为模板时:

template: '<div class="include-container" ng-include="tmpSrc"></div>'

并用 scope.tmpSrc 替换 scope.src ，ng-include 值现在很好，但是我的 html View 中替换的模板被注释掉了......为什么？

编辑3:

使用您的代码片段，这是我需要做的事情的想法:

  angular
    .module('app', [])
    .directive("myInclude", function($compile) {
      return {
        restrict: 'CAE',
        replace: true,
        scope: {
          src: '@',
        },
        link: function(scope, iElement, iAttrs, controller) {
          scope.$on("$includeContentError", function() {
            scope.src = 'error-template.html';
          });
          scope.$on("$includeContentLoaded", function(event, args) {
            // No need to do anything - the content has loaded.
          });
        },
        template: '<div class="include-container" ng-include="src"></div>'
      };
    })

  .controller('mainController', ['$scope', '$http',
    function($scope, $http) {

      // Is the content loaded ?
      $scope.state = 'loading';
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

<div ng-app="app">
  <div>
    This will show the correct template:
    <my-include src="path/to/template.html"></my-include>
  </div>

  <div>
    This will show an error template:
    <div ng-controller="mainController as main">
      <my-include src="something/that/does/not/exist.html"></my-include>
    </div>
  </div>

  <script type="text/ng-template" id="path/to/template.html">

    <h1>I want to display state : {{ state }}</h1>
  </script>
  <script type="text/ng-template" id="error-template.html">
    <h1>Hello from "error-template.html"</h1>
  </script>
</div>

Answer 1

基本上，您想要的是“增强” ngInclude 以支持和错误回退，而不是创建新范围(因为这可能会导致 scope's prototypical inheritance 出现某些“错误”，例如 this one 或 this one等)。

我创建了一个执行此操作的指令。它加载通过 src 属性指定的自定义模板，并支持通过 error-src 属性指定的后备模板选项。

我并不是很喜欢这种方法，特别是如果您在模板中添加依赖于其父级的逻辑。您应该将模板逻辑委托(delegate)给集中且可重用的指令。这将有助于测试过程并隐藏实现细节。

    angular
      .module('app', [])
      .controller('MainController', ['$scope',
        function($scope) {
          // Is the content loaded ?
          $scope.state = 'loading';
        }
      ])
      .directive('staticNgInclude', ['$compile', '$http', '$templateCache',
        function($compile, $http, $templateCache) {
          return {
            link: function(scope, iElement, iAttrs) {
              if (angular.isUndefined(iAttrs.src)) {
                throw 'staticNgInclude requires the src attribute.'
              }

              $http
                .get(iAttrs.src, {
                  cache: $templateCache
                }).then(function(response) {
                  // Hooray, the template was found!
                  $compile(iElement.html(response.data).contents())(scope);
                }, function() {
                  // Fetch the error template!
                  $http
                    .get(iAttrs.errorSrc || 'error-template.html', {
                      cache: $templateCache
                    }).then(function(response) {
                      $compile(iElement.html(response.data).contents())(scope);
                    });
                });
            },
            replace: false,
            restrict: 'E'
          };
        }
      ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="MainController">
    This will show the correct template:
    <static-ng-include src="path/to/template.html"></static-ng-include>
  </div>
  <div>
    This will show an error template:
    <static-ng-include src="something/that/does/not/exist.html"></static-ng-include>
  </div>
  <script type="text/ng-template" id="path/to/template.html">
    <h1>I want to display state : {{ state }}</h1>
  </script>
  <script type="text/ng-template" id="error-template.html">
    <h1>Hello from "error-template.html"</h1>
  </script>
</div>