Question

我目前有一个使用把手来创建初始HTML页面的服务器。在此页面中，我希望ng-include更新客户端上的页面。

但是，每当我的应用程序运行时，它都会加载页面，因此data-ng-include="template.url"会像往常一样加载template.url。无论如何ng-include在我的应用程序加载后加载这些数据？

这是plunker。查看index.html内的代码！

Answer 1

你可以使用

只需检查初始加载，它就会让您的生活变得轻松

<ANY ng-if="expression">

 //your code goes here

</ANY>

，例如

<ANY ng-if="false">

// code will not execute 

</ANY>

我希望这会对你有所帮助

代码

<body>
<div data-ng-controller="ctrl">
  <div data-ng-include="template.url" ng-if="false">

    Here is some stuff that I wish to remain until I press the button below.
  </div>
  <button type="button" data-ng-click="second()">Press me!</button>
</div>

根据您的回答，您应该在.js文件中使用您的条件，这里是您修改过的代码

 angular.module('myApp', [])
  .controller('ctrl', ['$scope', function ($scope) {

$scope.templates =
  [ { name: 'first.html', url: 'first.html'},
    { name: 'second.html', url: 'second.html'} ];

    if (false){
      $scope.template = $scope.templates[0];
    }


$scope.second = function () {
  $scope.template = $scope.templates[1];
};

$scope.first = function () {
  $scope.template = $scope.templates[0];
};

 }]);

Answer 2

或者，您可以使用$location作为案例，但是对于您的代码不再编辑，我可以为您提供此解决方案：

删除index.html文件中的代码，因此您的代码如下所示：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
   <script src="script.js"></script>
</head>
<body>
   <div data-ng-controller="ctrl">
      <div data-ng-include="template.url"></div>
   </div>
</body>
</html>

2.更换你的脚本.js变成这样：

angular.module('myApp', [])
.controller('ctrl', ['$scope', function ($scope) {

$scope.templates =
  [ { name: 'init.html', url: 'init.html'},
    { name: 'first.html', url: 'first.html'},
    { name: 'second.html', url: 'second.html'} ];
$scope.template = $scope.templates[0];

$scope.second = function () {
  $scope.template = $scope.templates[2];
};

$scope.first = function () {
  $scope.template = $scope.templates[1];
};
}]);

3.使用以下代码创建文件init.html：

 Here is some stuff that I wish to remain until I press the button below.
 <button type="button" data-ng-click="second()">Press me!</button>

运行它。

应用程序加载后的ng-include

2 个答案: