变量未打印到屏幕 - angularjs

Question

我有一个小控制器和一些基本数据。这是我的代码。我不确定为什么当我点击 link 时，我的消息不会显示。在控制台中，我完全没有收到任何错误。我安慰了变量，它们出现了。由于某种原因，它在视图中不起作用。我不确定我错过了什么。

index.html -- 导航菜单

<ul class="nav navbar-nav" ng-controller="menu">
        <li class="active"><a href ng-click="showMessage('Home')">Home</a></li>
        <li><a href ng-click="showMessage('Work')">Work</a></li>
        <li><a href ng-click="showMessage('Contact')">Contact</a></li>
      </ul>

<div class="container" ng-controller="menu">
 <h1> {{ message }} </h1>
</div><!-- /.container -->

控制器

angular.module('website', [])
.controller('menu', function($scope) {
    // show the message on click
    $scope.showMessage = function(messages) {
        $scope.message = messages;
        console.log($scope.message);
        return $scope.message;
    };
});

Answer 1

您有 2 个单独的 menu 控制器实例，它们不共享相同的范围

当您更新其中一个作用域时，另一个作用域并不知道。您可以使用服务在控制器之间共享数据或更改您正在使用的结构来实现单独的控制器实例

Answer 2

如果你定义了两次 ng-controller，两者都会有独立的作用域。

您需要将控制器的所有用法放在一个块中：

<div ng-controller="menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href ng-click="showMessage('Home')">Home</a></li>
        <li><a href ng-click="showMessage('Work')">Work</a></li>
        <li><a href ng-click="showMessage('Contact')">Contact</a></li>
    </ul>

    <div class="container">
        <h1> {{ message }} </h1>
    </div>
</div>

变量未打印到屏幕 - angularjs

variable not printing to screen - angularjs

html

javascript

jquery

angularjs

angular-routing