AngularJS 尝试从控制器更新视图时出现未定义的变量

Question

我是 AngularJS 的新手，我正在尝试在 "angular way" 中重写我的网页而不是使用 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 与 ng-init 中的 content 不同。

正确的做法是什么？也许我想错了。

Answer 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>

AngularJS 尝试从控制器更新视图时出现未定义的变量

AngularJS Undefined Variables When Trying To Update View From Controller

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-init