AngularJS 中无法访问 ng-model 外部的变量

Question

我今天才开始玩 angularJS，我有点困惑为什么我只能在我的代码的某个区域访问我的变量。在选择框下方的区域中，它从数组中选择一个文件，变量 {{ fileInfo }} 显示正常并且我的控制台日志显示该值在那里，但是该值不显示在第二个面板中 - 谁能解释我在哪里我出错了，为什么它没有出现以及如何解决它！这是我创建的 HTML，感谢您的宝贵时间。

<div class="col-md-6">
    <div class="panel panel-default" ng-controller="FileInfo">
        <div class="panel-heading">
            <h3 class="panel-title">Files</h3>
        </div>
        <form class="form-inline padding-left">

            <select class="form-control padding-left" name="selectedFile" ng-model="fileSelection" ng-change="FileInfo()" ng-options="opt.filename as opt.basename for opt in files">
            </select>
            {{ fileInfo }}
        </form>
    </div>
</div>
<div class="col-md-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">File Info</h3>
            <br> {{ fileInfo }}
        </div>

Answer 1

您有 2 个实例 FileInfo 控制器。控制器不会因为您在 HTML 中声明了两次而被共享。每个控制器实例都有自己的范围。

Answer 2

这样有两个控制器是自找麻烦。您最好使用所谓的控制器作为语法。这样 angular 就知道您要绑定到哪个控制器。像这样：

    <div class="col-md-6">
<div class="panel panel-default" ng-controller="FileInfo as ctrl1">
    <div class="panel-heading">
            <h3 class="panel-title">Files</h3>
    </div>
<form class="form-inline padding-left"> 

<select class="form-control padding-left" name="selectedFile" ng-model="ctrl1.fileSelection" ng-change="ctrl1.FileInfo()"  ng-options="opt.filename as opt.basename for opt in ctrl1.files">
</select>
{{ ctrl1.fileInfo }}
       </form>
   </div>
</div>
<div class="col-md-6">
        <div class="panel panel-default" ng-controller="FileInfo as ctrl2">
            <div class="panel-heading">
                    <h3 class="panel-title">File Info</h3><br>
                    {{ ctrl2.fileInfo }}
  </div>

请注意，如果您使用此策略，那么在您的控制器上您将不再在 $scope 对象上设置变量，而是在 this[=17 上设置变量=] 所以你只需做 this.fileInfo

而不是 $scope.fileInfo

Answer 3

从你的问题看来，你想显示{{fileInfo}}两次。

我会在你的 div 周围创建一个容器 div，然后将 ng-controller 放在容器 div 上。

<div class="container" ng-controller="controller1>

    <div class="col-md-6"> <!-- Stuff --> {{fileInfo}} </div>
    <div class="col-md-6"> <!-- Stuff --> {{fileInfo}} </div>

</div>

Answer 4

编辑后您设置了一次控制器 - 这很好。但是控制器仅在声明它的 <element> 内工作。您的第二个 {{fileInfo}} 在 <div ng-controller="FileInfo"> 元素之外。您必须在包含 {{fileInfo}}.

的 <div> 元素中声明 ng-controller

<div ng-controller="FileInfo">
    <div>
        <div>
            {{fileInfo}}
        </div>
    </div>
    <div>
        {{fileInfo}}
    </div>
</div>

Answer 5

更重要的是，这 2 个实例具有不同的范围。

 <div ng-controller="FileInfo">
  first scope:
  {{value}}
</div>
<div ng-controller="FileInfo">
  second scope:
  {{value}}
</div>

一个快速的 plunker 表明 ng-controller 创建了单独的范围。 https://plnkr.co/edit/BUuTPP3qTW9HE0jxI1C6?p=preview

AngularJS 中无法访问 ng-model 外部的变量

Unable to access variable outside ng-model in AngularJS

javascript

angularjs

ng-options

angularjs-ng-options