2014-06-27 86 views
0

我zAngular文件:NG-視圖不工作,asp.net

angular.module('Portfolio', ['ngRoute', 'ngResource']) 
.config(function ($routeProvider) { 
    $routeProvider.when('/Home/Portfolio', { templateUrl: 'templates/Portfolio.html', controller: 'PortfolioCtrl' }) 

}); 
//registrationModule.controller('PortfolioCtrl', ['ngAnimate', 'ngTouch', function ($scope) { 
//}]); 

angular.module('Portfolio', ['ngAnimate', 'ngTouch']) 
    .controller('PortfolioCtrl', function ($scope) { 

     // Set of Photos 
     $scope.photos = [ 
     { src: 'http://images.freehdw.com/800/3d-abstract_other_windmill-in-park_33583.jpg', desc: 'Image 01' }, 
     { src: 'http://2.bp.blogspot.com/-4WJHXS8hVhA/UGlk5wJAjqI/AAAAAAAAFBE/GCwAtynyY9Q/s1600/Huge-Windmill-Holland-Tulip-Field-HD-Wallpaper--NatureWallBase.Blogspot.Com.jpg', desc: 'Image 02' }, 
     { src: 'http://p1.pichost.me/640/7/1296144.jpg', desc: 'Image 03' }, 
     { src: 'http://www.desktopaper.com/wp-content/uploads/latest-windmill-farm-wallpaper.jpg', desc: 'Image 04' }, 
     { src: 'http://www.7is7.com/otto/estonia/kuremaa_windmill.jpg', desc: 'Image 05' }, 
     { src: 'http://www.dream-wallpaper.com/free-wallpaper/photography-wallpaper/windmill-1-wallpaper/1440x900/free-wallpaper-18.jpg', desc: 'Image 06' } 
     ]; 

     // initial image index 
     $scope._Index = 0; 

     // if a current image is the same as requested image 
     $scope.isActive = function (index) { 
      return $scope._Index === index; 
     }; 

     // show prev image 
     $scope.showPrev = function() { 
      $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1; 
     }; 

     // show next image 
     $scope.showNext = function() { 
      $scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0; 
     }; 

     // show a certain image 
     $scope.showPhoto = function (index) { 
      $scope._Index = index; 
     }; 
    }); 

我portfolio.hmtl:

<!DOCTYPE html> 
<html ng-app="Portfolio"> 
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
    <!-- add javascripts --> 
    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script> 
    <script src="http://code.angularjs.org/1.2.0rc1/angular-animate.min.js"></script> 
    <script src="http://code.angularjs.org/1.2.0rc1/angular-touch.min.js"></script> 
    <script src="../zAngular.js"></script> 
    <link href="../../Content/style.css" rel="stylesheet" /> 

</head> 
<body ng-controller="PortfolioCtrl"> 
    <!-- slider container --> 
    <div class="container slider"> 

     <!-- enumerate all photos --> 
     <img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" width="800" height="500" /> 

     <!-- prev/next controls --> 
     <img class="arrow prev" ng-click="showPrev()"> 
     <img class="arrow next fa-arrow-right" src="../../Images/NextArrow.png" ng-click="showNext()"> 

     <!-- extra nav1igation controls --> 
     <ul class="nav1"> 
      <li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}"> 
       <img src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" width="50" height="31"/> 
      </li> 
     </ul> 

    </div> 
</body> 
</html> 

我的共享佈局的頁腳:

 <script src="~/Scripts/angular.js"></script> 
     <script src="~/Scripts/angular-resource.js"></script> 
     <script src="~/Scripts/angular-route.js"></script> 
     <script src="~/Scripts/zAngular.js"></script> 
     <script src="~/Scripts/Registration-Module/registration-module.js"></script> 
</script> 
     @*@Scripts.Render("~/bundles/angular")*@ 
     @Scripts.Render("~/bundles/jquery") 
     @Scripts.Render("~/bundles/bootstrap") 
     @RenderSection("scripts", required: false) 

我含ng-view的cshtml文件:

<div class="container" ng-controller="PortfolioCtrl"> 

    <div ng-view></div> 
</div> 
在CSHTML

錯誤消息:

Error: [ng:areq] Argument 'PortfolioCtrl' is not a function, got undefined 
http://errors.angularjs.org/1.2.16/ng/areq?p0=PortfolioCtrl&p1=not%20a%20function%2C%20got%20undefined 
    at http://localhost:62540/Scripts/angular.js:78:12 
    at assertArg (http://localhost:62540/Scripts/angular.js:1443:11) 
    at assertArgFn (http://localhost:62540/Scripts/angular.js:1453:3) 
    at http://localhost:62540/Scripts/angular.js:7131:9 
    at http://localhost:62540/Scripts/angular.js:6538:34 
    at forEach (http://localhost:62540/Scripts/angular.js:330:20) 
    at nodeLinkFn (http://localhost:62540/Scripts/angular.js:6525:11) 
    at compositeLinkFn (http://localhost:62540/Scripts/angular.js:5986:15) 
    at compositeLinkFn (http://localhost:62540/Scripts/angular.js:5989:13) 
    at compositeLinkFn (http://localhost:62540/Scripts/angular.js:5989:13) 

一切正常,只用html頁面。但是沒有任何內容顯示在cshtml頁面上。我想指出的是,該畫廊與Angular 1.2.0rc1,而不是與AngularJS v1.2.16(在我的共享佈局) - 在網站上有其他角度依賴於此版本的角度

任何幫助將很好

回答

0

你正在聲明你的模塊兩次。你應該只使用angular.module('name',[]);語法,之後您需要引用一個沒有數組語法的模塊。 angular.module( '姓名');

var module = angular.module('Portfolio', ['ngRoute', 'ngResource', 'ngTouch', 'ngAnimate']); 

    module.config(function ($routeProvider) { 
     // your code 
    }); 

    module.controller('PortfolioCtrl', function ($scope) { 
     // your code 
     }); 
+0

這會導致html頁面不再呈現圖片庫,而ng-view仍然不起作用,因爲我在控制器中缺少'ngAnimate','ngTouch'。我也嘗試過你的方法:'angular.module('Portfolio') .controller('PortfolioCtrl',['ngAnimate','ngTouch',function($ scope){' – user3685738

+0

也試過這個:'var portfolio = angular.module('Portfolio',['ngRoute','ngResource']) .config(function($ routeProvider){ $ routeProvider.when('/ Home/Portfolio',{templateUrl:'templates/Portfolio.html 」,控制器: 'PortfolioCtrl'}) }); 組合 .controller( 'PortfolioCtrl',[ 'ngAnimate', 'ngTouch',函數($範圍){' – user3685738

+0

我已經編輯我的答案如此基本結構就是這樣試試吧,然後添加你的其他代碼,你錯過了關於聲明模塊一次的想法 – Jon