2015-01-02 105 views
0

我需要執行一個非常簡單的「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> 

預先感謝您...

回答

1

ng-include進行XHR調用,所以如果你使用的是文件服務器,那麼它將無法工作,並且它在服務器上工作,因爲服務器能夠處理HTTP。您可以使用Grunt插件https://github.com/devpaul/grunt-devserver創建一個簡單的Web服務器。

0

我測試此代碼,它實際上是工作一樣。所以問題必須出現在您發佈的代碼之外的某個地方。

也許文件template1.html不存在,或者至少不在同一個目錄中?

+0

文件template1.html存在於相同的目錄中。我也能夠在瀏覽器中檢查URL。它與AngularJs的安裝方式有什麼關係?我正在使用grunt來處理它。 順便說一句,感謝您的答覆。 Dint注意到你的答覆,否則我會提前回復。 – Artitude

0

@popovitsj對不起。發現,當我上傳網站到服務器,它的工作原理。我以前在本地主機上工作過,並沒有在那裏工作。不知道爲什麼。

感謝您的回答。

+0

如果模板是來自文件的服務器,則會進行http調用://然後它將無法工作。 – satish

+0

非常感謝! Dint意識到我一直在處理文件,我沒有打開本地主機。如果您將答案張貼爲答案,我可以將您的答案標記爲正確答案。 – Artitude