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(在我的共享佈局) - 在網站上有其他角度依賴於此版本的角度
任何幫助將很好
這會導致html頁面不再呈現圖片庫,而ng-view仍然不起作用,因爲我在控制器中缺少'ngAnimate','ngTouch'。我也嘗試過你的方法:'angular.module('Portfolio') .controller('PortfolioCtrl',['ngAnimate','ngTouch',function($ scope){' – user3685738
也試過這個:'var portfolio = angular.module('Portfolio',['ngRoute','ngResource']) .config(function($ routeProvider){ $ routeProvider.when('/ Home/Portfolio',{templateUrl:'templates/Portfolio.html 」,控制器: 'PortfolioCtrl'}) }); 組合 .controller( 'PortfolioCtrl',[ 'ngAnimate', 'ngTouch',函數($範圍){' – user3685738
我已經編輯我的答案如此基本結構就是這樣試試吧,然後添加你的其他代碼,你錯過了關於聲明模塊一次的想法 – Jon