非常简单ng-include不工作

我需要执行一个非常简单的“ng-include”，并且我无法实现这个工作。任何帮助将非常感激。非常简单ng-include不工作

这里是我想

<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>

预先感谢您...

来源

2015-01-02 Artitude

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

来源

2015-01-05 11:05:01 satish

我测试此代码，它实际上是工作一样。所以问题必须出现在您发布的代码之外的某个地方。

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

来源

2015-01-02 11:53:23 wvdz

文件template1.html存在于相同的目录中。我也能够在浏览器中检查URL。它与AngularJs的安装方式有什么关系？我正在使用grunt来处理它。顺便说一句，感谢您的答复。 Dint注意到你的答复，否则我会提前回复。 – Artitude

@popovitsj对不起。发现，当我上传网站到服务器，它的工作原理。我以前在本地主机上工作过，并没有在那里工作。不知道为什么。

感谢您的回答。

来源

2015-01-03 08:40:05 Artitude

如果模板是来自文件的服务器，则会进行http调用：//然后它将无法工作。 – satish

非常感谢！ Dint意识到我一直在处理文件，我没有打开本地主机。如果您将答案张贴为答案，我可以将您的答案标记为正确答案。 – Artitude

非常简单ng-include不工作

回答

相关问题