在 Angular 中是否有等价于“blah”+ 变量 +“blah”？

Question

这实际上有效：

<div ng-include="'/partials/' + items.my_filename + '.html'"></div>

但即使它找到了文件，它仍然给我一个错误：

GET http://localhost:9000/partials/.html 404 (Not Found) 

我很高兴它有效，但有人知道如何摆脱错误吗？

编辑：它从远程数据库中提取变量，延迟会导致错误吗？

EDIT2：是的，这就是造成它的原因。 我认为这是 Firebase 的问题。

Answer 1

使用ng-if

<div ng-if="items.my_filename" ng-include="'/partials/' + items.my_filename + '.html'"></div>

示例：使用ng-if ： http : //jsfiddle.net/TheSharpieOne/daFhp/1/注意只有一个调用，带有文件名（如果该文件在那里就可以工作）。

示例：没有ng-if ： http : //jsfiddle.net/TheSharpieOne/daFhp/注意两个调用，一个没有 var/file 名称。 一个带有文件名（如果该文件在那里就可以工作）。

我在示例中使用$timeout来模拟 AJAX 调用中的延迟。

ng-if防止错误调用。

更新
当您在与ng-include相同的元素上使用ng-if时，较新版本的 AngularJS (1.2.0-rc3+) 会出现问题。 要解决此问题，您可以简单地将ng-include元素包装在一个带有ng-if的元素中。

<div ng-if="items.my_filename">
    <div ng-include="'/partials/' + items.my_filename + '.html'"></div>
</div>

Answer 2

使用一个事实，即ng-include ，给定一个null参数，什么都不做。

结果你可以走这条路

<div ng-include="partialPath"></div>

例如

app.controller('Ctrl', function ($scope, $http) {
  $scope.partialPath = null;

  $http.get(...).success(function (data) {
     $scope.partialPath = '/partials/' + data.my_filename + '.html';
  });
});

或者你也可以使用这样的过滤器（非常适合重复使用）

app.filter('partialize', function () {
  return function (name) {
    return name ? '/partials/' + name + '.html' : null;
  };
});

具有以下部分定义

<div ng-include="my_filename | partialize"></div>