2015-07-08 2 views
1

У меня проблема с моим кодом. В моем приложении у меня есть 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); 
    } 

}); 

Я не знаю, где моя ошибка. И еще один вопрос - это нормально, если я создаю контроллер внутри контроллера? Как и то, что я сделал?

Хорошо, это все, что я надеюсь, что вы можете мне помочь. :)

+0

вы смешиваете методы здесь. некоторые из ваших HTML используют '$ scope', а некоторые из них используют' controller as'. Кроме того, вы не указали, какой из контроллеров включена ваша функция, и что вы * ожидаете * иметь значение 'vat_rate'. – Claies

+1

также из-за того, как работает наследование прототипа JavaScript и как работают угловые контроллеры http: //stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs, вы должны ВСЕГДА быть привязаны к свойствам объекта, а не примитивным свойствам (т. е. правилу «точка» «). – Claies

+0

ok, поэтому на основании только что сделанного вами редактирования вы пытаетесь запустить функцию и получить доступ к свойству из внешнего контроллера, но поскольку это не свойство объекта, оно ограничено как свойство на внутреннем контроллере. – Claies

ответ

1

Как я отметил в комментариях, вы смешение стилей здесь, что делает его трудно получить доступ к вашей собственности в правильном объеме. Кроме того, поскольку ваше свойство является примитивным значением без предварительного присвоения, а не объектом, оно подвержено JavaScript Prototype Inheritance вопросам.

Вот как я бы рекомендовал рефакторинг вашего внешнего контроллера, чтобы использовать 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> 
+0

Спасибо, сэр, что вы подразумеваете под этим? 'Кроме того, поскольку ваше свойство является примитивным значением без предварительного присвоения, а не объектом,' в каждой модели, которую я создаю, я должен сделать ее объектом? – Jerielle

+0

Хорошо, я понял. Огромное спасибо. Я изучу вашу предоставленную ссылку и надеюсь, что смогу ее понять.Еще раз спасибо :) – Jerielle

+1

Я не мог начать объяснять это лучше, чем ответ на вопрос, который я связал, но по существу, в вашем первом примере, потому что 'vat_rate' является примитивным номером, он фактически связан с' PanelController' ' $ scope'. но поскольку он не был назначен в JavaScript, он «скрыт» из других областей. – Claies

3

Да, вы можете создать контроллер внутри контроллера.

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