在Angular中，无法访问控制器中的作用域变量

Unable to access scope variable inside a controller in Angular

本文关键字：控制器 作用域 访问控制 变量 Angular 访问      更新时间：2023-09-26

我的代码有问题。在我的应用程序中，我有两个控制器，一个是加载所有数据，第二个是显示一个选项卡。

设置如下:

<div class="row" ng-app="quotation_list">
    <div class="col-md-12" ng-controller="quoteList">
        <section ng-controller="PanelController as panel">
           <div class="panel pane-default" ng-show="panel.isSelected(1)">
              ...
              <div class="row">
                        <div class="form-group">
                            <label>VAT(%): </label>
                            <input type="number" class="form-control text-right" ng-model="vat_rate" />
                        </div>
                    </div>
              <button class="btn btn-default" type="button" ng-click="computePercentage()">TEST VALUE</button>
           </div>
        </section>
    </div>
</div>

我试图得到模型的值vat_rate但我得到的是未定义值

这是我的函数:

var quotationList = angular.module('quotation_list', ['jsonFormatter','ui.bootstrap','ckeditor']);
    quotationList.controller('quoteList', function($scope, $http) {
    //some codes ...
    $scope.computePercentage = function() {
        console.log($scope.vat_rate);
    }
});

我不知道我的错误在哪里。还有一个问题如果我在控制器中创建一个控制器可以吗?就像我做的那样?

好了，我希望你能帮助我。:)

可以在控制器中创建控制器

<body ng-controller="firstController">
    <span>{{scopeinFirstController}}</span>
    <div ng-controller="secondController">
        <span>{{scopeinSecondController}}</span>
        <div ng-controller="lastController">
            <span>{{scopeinlastController}}</span>
        </div>
    </div>
</body>

正如我在评论中指出的那样，您在这里混合了样式，这使得难以在正确的范围内访问您的属性。另外，因为你的属性是一个没有预先赋值的原始值，而不是对象，所以它会受到JavaScript原型继承问题的影响。

以下是我建议如何重构外部控制器以使用controller as，简化控制器，并使您的属性属于哪个控制器变得明显。这有一个额外的好处，即自动执行关于原型继承的"点规则"。 
var quotationList = angular.module('quotation_list',
                            ['jsonFormatter','ui.bootstrap','ckeditor']);
    quotationList.controller('quoteListController', function($http) {
    var quoteList = this; //store a reference to this for easy use
    //some codes ...
    quoteList.computePercentage = function() {
        console.log(quoteList.vat_rate);
    }    
});

和HTML:

<div class="row" ng-app="quotation_list">
    <div class="col-md-12" ng-controller="quoteListController as quoteList">
        <section ng-controller="PanelController as panel">
           <div class="panel pane-default" ng-show="panel.isSelected(1)">
              ...
              <div class="row">
                  <div class="form-group">
                      <label>VAT(%): </label>
                      <input type="number" class="form-control text-right" ng-model="quoteList.vat_rate" />
                  </div>
              </div>
              <button class="btn btn-default" type="button" ng-click="quoteList.computePercentage()">TEST VALUE</button>
           </div>
        </section>
    </div>
</div>
相关文章：