JavaScript Angular 1.5.x Controller

При изучении Angular 1.5 я очень запутался в использовании тегов.JavaScript Angular 1.5.x Controller

А именно, я не могу понять, почему должен быть глобальный объект для хранения переменных в контроллере.

JS Bin: http://jsbin.com/puyayocomi/11/edit?html,js,output

Вопрос заключается в том: Почему мы не можем назвать переменные непосредственно созданные в контроллере, а не с помощью глобального объекта (в данном случае называется «пространство имен»), чтобы держать все переменные контроллера?

index.html:

<!DOCTYPE html> 
<html ng-app="todoApp"> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    </head> 
    <body> 
     <h2> Angular Controllers </h2> 

     <!-- Why not : ng-controller="todoCtrl" --> 
     <div ng-controller="todoCtrl as namespace"> 
     <!--         -->  
      <ul class="unstyled"> 
       <!-- Why not : ng-repeat="todo in todos" --> 
       <li ng-repeat="todo in namespace.todos"> 
       <!--          --> 
        <label class="checkbox"> 
         <input type="checkbox" ng-model="todo.done"> 
         <span class="done-{{todo.done}}">{{todo.text}}. </span> 
        </label> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

JavaScript:

console.log('Hello Script!'); 

angular.module('todoApp',[]).controller('todoCtrl',function() 
{ 
    var namespace = this; 

    namespace.todos = 
    [ 
    { text:'one', done:true }, 
    { text:'two', done:false } 
    ]; 

    /* 
    <!-- Why not : --> 

    var todos = 
    [ 
    { text:'one', done:true }, 
    { text:'two', done:false } 
    ]; 
    */ 
})

источник

2016-11-06 Ricardo Agra

Я нашел лучший способ, передаю переменную $ scope в ваш контроллер функций и предоставит вам пространство имен, которое html будет искать в ваших переменных.

JS Bin Here

HTML

<div ng-controller="todoCtrl"> 
     <ul class="unstyled"> 
      <li ng-repeat="todo in todos"> 
       <label class="checkbox"> 
        <input type="checkbox" ng-model="todo.done"> 
        <span class="done-{{todo.done}}">{{todo.text}}</span> 
       </label> 
      </li> 
     </ul> 
    </div>

JavaScript:

angular.module('todoApp',[]).controller('todoCtrl',function($scope) 
{  
    $scope.todos = 
    [ 
     { text:'one', done:true }, 
     { text:'two', done:false } 
    ]; 
})

источник

2016-11-07 21:11:35

'$ scope.todos' и' this.todos' эквивалентны. Угловая стилизация john papa способствует «этому» - см. Https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md# стиль-y031 –

Это в основном сводится к тому, как функция прицелы работать в JavaScript:

function Controller() { 
 
    // local variable 
 
    var foo = 1; 
 

 
    // instance property 
 
    this.bar = 2; 
 
} 
 

 
// imagine Angular creates an instance of your controller like this: 
 
var instance = new Controller(); 
 
console.log('foo', instance.foo) // undefined 
 
console.log('bar', instance.bar) // 2

Итак, короче: локальные переменные не могут быть доступны извне функции, а свойства связаны с this.

источник

2016-11-06 16:03:56

имеет смысл, спасибо! –

Добро пожаловать! Я думаю, это также имеет смысл таким образом, потому что таким образом вы более подробно рассказываете о том, что вы действительно хотите в представлении, а не только о временной переменной. –

О, и добро пожаловать в переполнение стека! Если я ответил на ваш вопрос, отметьте его как принятый, щелкнув значок галочки;) –

JavaScript Angular 1.5.x Controller

ответ

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