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

Question

I have a problem with my code. 我的代码有问题。 In my app I have 2 controllers one is to load all the data and the second is to display a tab. 在我的应用程序中，我有2个控制器，一个是加载所有数据，第二个是显示选项卡。

Here's the setup: 设置如下：

<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>

And I am trying to get the value of the model vat_rate but what I got is undefined value 我正在尝试获取模型vat_rate的值，但是我得到的是未定义的值

Here's my function for that: 这是我的功能：

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

});

I don't know where's my error. 我不知道我的错误在哪里。 And one more question is it fine if I create a controller inside a controller? 还有一个问题是，如果我在控制器内创建一个控制器就可以了吗？ Just like what I did? 就像我所做的一样？

Ok that's all I hope you can help me. 好的，我希望您能为我提供帮助。 :) :)

Answer 1

yes you can create a controller inside controller. 是的，您可以在控制器内部创建一个控制器。

<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

As I pointed out in comments, you are mixing styles here, which is making it difficult to access your property in the correct scope. 正如我在评论中指出的那样，您在这里混合使用样式，这使得在正确的范围内访问属性变得困难。 Also, because your property is a primitive value without prior assignment, and not an object, it is subject to JavaScript Prototype Inheritance issues. 另外，由于您的属性是没有事先分配的原始值，而不是对象，因此它会遇到JavaScript原型继承问题。

Here is how I would recommend refactoring your outer controller to make use of controller as , simplify the controller somewhat, and make it plainly obvious which controller your properties belong to. 这就是我建议重构外部控制器以使用controller as ，稍微简化一下控制器，并明确表明您的属性属于哪个控制器。 This has an added side benefit of automatically enforcing the "dot rule" with regard to Prototype Inheritance. 这具有在原型继承方面自动执行“点规则”的附加好处。

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

And the HTML: 和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