1

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.

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

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. :)

Improve this question
6
  • you're mixing methods here. some of your HTML is using $scope and some of it is using controller as. also, you haven't shown which of the controllers your function is on, and which you are expecting to have the vat_rate in. Commented Jul 8, 2015 at 4:47
  • 1
    also, due to the way JavaScript prototype inheritance work and the way angular controllers work stackoverflow.com/questions/14049480/… , you should ALWAYS be bound to object properties rather than primitive properties (i.e. the "dot rule"). Commented Jul 8, 2015 at 4:51
  • ok, so based on the edit you just made, you are trying to run a function and access the property from the outer controller, but because it's not an object property, it's scoped as a property on the inner controller. Commented Jul 8, 2015 at 4:52
  • I really would recommend that you consider refactoring the outer controller to use controller as, in the way that the inner controller is defined, and don't rely upon $scope. aside from making the code more uniform to work with, it would also make it much more clear which controller is in control of which properties. (something like quoteList.vat_rate is much more clear). Commented Jul 8, 2015 at 4:57
  • yes, so you mean there's no way to access the scope variable from the outer controller? Commented Jul 8, 2015 at 4:58

2 Answers 2

Reset to default
3

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

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

<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>
Improve this answer

5 Comments

Thanks sir, what do you mean by this? Also, because your property is a primitive value without prior assignment, and not an object, in every model I create should I make it an object?
Ok I got it. Thank you so much. I will study your provided link and hopefully I can understand it. Thanks again :)
I couldn't begin to explain it better than the answer to the question I linked, but essentially, in your first sample, because the vat_rate is a primitive number, it's actually bound to the PanelController $scope. but because it wasn't assigned in the JavaScript, it's "hidden" from other scopes.
like in the other answer, where he has firstController, secondController, lastController, any primitive strings, numbers ,etc in lastController are not visible in secondController or above.
and if you had a variable with the same name in more than one, they each would have a different value; ex. if you had myNum in lastController and myNum in secondController, secondController.myNum !== lastController.myNum.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.