当试图从控制器更新视图时，AngularJS未定义变量

AngularJS Undefined Variables When Trying To Update View From Controller

本文关键字：AngularJS 未定义 变量 新视图 更新 控制器      更新时间：2023-09-26

我是新来的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未定义，这对我来说很奇怪，因为它在控制器本身，所以我尝试了content = $scope.headerLinks.alternativeText;，并且停止了错误，但我猜控制器中的content与ng-init中的content不一样。

正确的方法是什么?也许我想错了。

对于您的情况，最好稍微简化您的代码，例如使用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>

相关文章：