无法在Angular中的控制器内部访问范围变量

Question

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

设置如下：

<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);
    }

});

我不知道我的错误在哪里。 还有一个问题是，如果我在控制器内创建一个控制器就可以了吗？ 就像我所做的一样？

好的，我希望您能为我提供帮助。 :)

Answer 1

是的，您可以在控制器内部创建一个控制器。

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

Answer 2

正如我在评论中指出的那样，您在这里混合使用样式，这使得在正确的范围内访问属性变得困难。 另外，由于您的属性是没有事先分配的原始值，而不是对象，因此它会遇到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>

无法在Angular中的控制器内部访问范围变量

问题描述

2 个解决方案

解决方案1
3 2015-07-08 04:57:34

解决方案2
1 已采纳 2015-07-08 05:07:22

无法在Angular中的控制器内部访问范围变量

问题描述

2 个解决方案

解决方案1 3 2015-07-08 04:57:34

解决方案2 1 已采纳 2015-07-08 05:07:22

解决方案1
3 2015-07-08 04:57:34

解决方案2
1 已采纳 2015-07-08 05:07:22