繁体   English   中英

ng-view无法正常运作,asp.net

[英]ng-view is not working, asp.net

我的zAngular文件:

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;
      };
  });

我的投资组合:

    <!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(在我的共享布局中)-网站中还有其他角度依赖于此版本的angular

任何帮助都会很棒

您两次声明模块。 您应该只使用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   
      });

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM