0

我是 AngularJS 的新手，正在尝试以“角度方式”而不是使用 jquery 重写我的网页，但我的理解遇到了一些问题。

我的 HTML 是这样的：

<body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill">
    <section id="intro" class="main style1 dark">

        <!-- Header -->            
        <header ng-controller="MainController" id="header">

            <!-- Logo -->
            <h1 id="logo">Summer Mill</h1>

            <a ng-mouseover="locations()"
                style="color:black;text-decoration:initial;"
                id="logoii"
                href="http://localhost/locations">Locations</a>

            <!-- Nav -->
            <nav id="nav">
                <ul class="nav navbar-nav">
                    <li ng-repeat="headerLink in headerLinks"><a ng-init="content=headerLink.text" href="#{{content}}">{{content}}</a></li>
                </ul>
            </nav>
        </header>

然后我的控制器：

app.controller('MainController', ['$scope', function($scope) {
    $scope.headerLinks = [ 
        { 
            text: 'Intro', 
            alternativeText: 'Arlington'
        },
        { 
            text: 'Wholesale', 
            alternativeText: 'New York'
        }
    ];

    $scope.locations = function() {
        content = headerLinks.alternativeText;
    }
}]);

所以基本上，在悬停时，我希望<li>内容发生变化。我知道悬停事件正在被触发，而且是正确的。我得到的错误是ReferenceError: headerLinks is not defined这对我来说很奇怪，因为它在控制器本身中，所以我尝试content = $scope.headerLinks.alternativeText;并停止了错误，但我猜content在控制器中与content在ng-init.

这样做的正确方法是什么？也许我在想这个错误的方式。

4

1 回答 1

1

对于您的情况，最好简化您的代码，例如使用ng-if和标志isOver

angular.module('app',[])
       .controller('MainController',function($scope){
  
   $scope.headerLinks = [ 
        { 
            text: 'Intro', 
            alternativeText: 'Arlington'
        },
        { 
            text: 'Wholesale', 
            alternativeText: 'New York'
        }
    ];
$scope.locations = function() {
    content = headerLinks.alternativeText;
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->            
<header ng-app="app" ng-controller="MainController" id="header">

        <!-- Logo -->
  
        <h1 id="logo">Summer Mill</h1>
        <a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
                style="color:black;text-decoration:initial;"
                id="logoii"
                href="http://localhost/locations">Locations</a>

        <!-- Nav -->
                <nav id="nav">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="headerLink in headerLinks">
                          <a ng-if="!isOver" href="#{{headerLink.text}}">{{headerLink.text}}</a>
                          <a ng-if="isOver" href="#{{headerLink.alternativeText}}">{{headerLink.alternativeText}}</a>
                      </li>
                    </ul>
                </nav>

</header>

你也可以ng-if像这样使用三元运算符

angular.module('app',[])
       .controller('MainController',function($scope){
  
   $scope.headerLinks = [ 
        { 
            text: 'Intro', 
            alternativeText: 'Arlington'
        },
        { 
            text: 'Wholesale', 
            alternativeText: 'New York'
        }
    ];
$scope.locations = function() {
    content = headerLinks.alternativeText;
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->            
<header ng-app="app" ng-controller="MainController" id="header">

        <!-- Logo -->
  
        <h1 id="logo">Summer Mill</h1>
        <a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
                style="color:black;text-decoration:initial;"
                id="logoii"
                href="http://localhost/locations">Locations</a>

        <!-- Nav -->
                <nav id="nav">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="headerLink in headerLinks">
                          <a href="#{{!isOver ? headerLink.text : headerLink.alternativeText}}">{{!isOver ? headerLink.text : headerLink.alternativeText}}</a>
                      </li>
                    </ul>
                </nav>

</header>

甚至没有条件

angular.module('app', [])
  .controller('MainController', function($scope) {

    $scope.currentText = 'text';
    $scope.headerLinks = [{
      text: 'Intro',
      alternativeText: 'Arlington'
    }, {
      text: 'Wholesale',
      alternativeText: 'New York'
    }];
    $scope.locations = function() {
      content = headerLinks.alternativeText;
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->
<header ng-app="app" ng-controller="MainController" id="header">

  <!-- Logo -->

  <h1 id="logo">Summer Mill</h1>
  <a ng-mouseover="currentText='alternativeText'" ng-mouseout="currentText='text'" style="color:black;text-decoration:initial;" id="logoii" href="http://localhost/locations">Locations</a>

  <!-- Nav -->
  <nav id="nav">
    <ul class="nav navbar-nav">
      <li ng-repeat="headerLink in headerLinks">
        <a href="#{{headerLink[currentText]}}">{{headerLink[currentText]}}</a>
      </li>
    </ul>
  </nav>

</header>

于 2015-05-27T13:03:15.697 回答