Question

我需要表现得非常简单＆＃34; ng-include＆＃34;，我不能让这个工作。任何帮助将不胜感激。

这是我想要帮助的部分

<div class="slide-animate" ng-include="'template1.html'"></div>

我使用过别处提到的单引号。而且，我不知道为什么这不起作用。它可能是Angular框架的初始化吗？它可能是代码中的任何其他冲突功能吗？

任何这是完整的代码。

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Example - example-example83-production</title>
    <style>
    .slide-animate-container {
        position:relative;
      background:white;
      border:1px solid black;
      height:40px;
      overflow:hidden;
}

.slide-animate {
  padding:10px;
}

.slide-animate.ng-enter, .slide-animate.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:block;
  padding:10px;
}

.slide-animate.ng-enter {
  top:-50px;
}
.slide-animate.ng-enter.ng-enter-active {
  top:0;
}

.slide-animate.ng-leave {
  top:0;
}
.slide-animate.ng-leave.ng-leave-active {
  top:50px;
}

  </style>


  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>
  <script>

      (function(angular) {
          alert("hello");
angular.module('includeExample', ['ngAnimate'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.templates =
      [ { name: 'template1.html', url: 'template1.html'},
        { name: 'template2.html', url: 'template2.html'} ];
    $scope.template = $scope.templates[0];
    $scope.name = "World";
  }]);
})(window.angular);

  </script>

</head>
<body ng-app="includeExample">
  <div ng-controller="ExampleController">
      <select ng-model="template" ng-options="t.name for t in templates">
         <option value="">(blank)</option>
      </select>
      url of the template: <code>{{template.url}}</code>
      <p>Hello, {{name}}! </p>
      <div class="slide-animate-container">
            <div class="slide-animate" ng-include="'template1.html'"></div>
      </div>
  </div>
</body>
</html>

提前谢谢你......

Answer 1

ng-include进行XHR调用，因此如果您正在使用文件服务器，那么它将无法工作，并且它在服务器中工作，因为服务器能够处理HTTP。您可以使用Grunt插件https://github.com/devpaul/grunt-devserver创建一个简单的Web服务器。

Answer 2

我测试了这段代码，它实际上确实有效。所以问题必须放在你发布的代码之外的某个地方。

也许文件template1.html不存在，或者至少不在同一个目录中？

Answer 3

@popovitsj对不起，对不起。发现当我将网站上传到服务器时，它可以工作。我之前在localhost上工作，它在那里不起作用。不知道为什么。

感谢您的回答。

非常简单 - 包括不工作

3 个答案: