2015-07-18 2 views
0

Я новичок в Angular. У меня проблема, например, я создаю переменную в Controller JS, но не могу получить в HTML-части.

<html ng-app='Demo'>  
<body> 
      <h2>Select Your Symbol</h2><br><br> 
      <div class='selection' ng-controller='MasterController' ng-init="selectedSymbol = ''" > 
       <div class=" col-md-3"></div> 
       <div ng-repeat="symbol in symbols" ng-model="selectedSymbol"> 
        <a class='col-xs-1 box' id={{symbol.definition}} ng-click="remove(symbol); user= symbol.definition" ><big class='fixed'>{{symbol.definition}}</big></a> 
       </div> 
      </div><br> 
      {{selectedSymbol}} 
     </body> 
</html> 

JS часть

(function(ng) { 

    "use strict"; 

    // Define our AngularJS application module. 
    window.demo = ng.module("Demo", []); 

})(angular); 
(function(ng, app) { 

    "use strict"; 

    app.controller(
     "MasterController", 
     function($scope) { 


      // -- Define Controller Methods. ---------------- // 

       $scope.symbols = [ 
      { 
       definition: 'X', 
      }, 
      { 
       definition: 'O', 
      } 
     ]; 
     $scope.remove = function(symbol) { 
     if(symbol.definition == 'X' && this.symbols.length >1) 
     { 
      this.symbols.splice(1); 
      $scope.selectedSymbol = 'X'; 
      alert($scope.selectedSymbol); 
     } 
     else if (symbol.definition == 'O' && this.symbols.length >1) 
     { 
      this.symbols.splice(0,1); 
      $scope.selectedSymbol = 'O'; 
      alert($scope.selectedSymbol); 
     } 

     }; 
     } 
    ); 

})(angular, demo); 

Теперь я могу видеть $scope.selectedSymbol в Alert, но не может иметь в html. Я хочу использовать в качестве Углового.

Пожалуйста, помогите спасибо

+0

вы можете предоставить скрипку> – ngLover

+0

Это дало ошибку. Я пытаюсь добавить его. –

ответ

3

Вы можете получить доступ только к области видимости переменных внутри контроллера контейнера т.е. DIV в вашем случае. Вне этого div переменная scope не определена. Поместите этот тег внутри div, вы сможете получить к нему доступ.

Пример:

<div class='selection' ng-controller='MasterController' ng-init="selectedSymbol = ''"> 
    <div class=" col-md-3"></div> 
    <div ng-repeat="symbol in symbols" ng-model="selectedSymbol"> <a class='col-xs-1 box' id={{symbol.definition}} ng-click="remove(symbol); user= symbol.definition"><big class='fixed'>{{symbol.definition}}</big></a> 

    </div>{{selectedSymbol}}<!--This is well inside the scope of controller and hence you can access it in the html--> 
</div> 
+0

Спасибо. Он решен –

Смежные вопросы