JavaScript Angular 1.5.x Controller

Als ich Angular 1.5 gelernt habe, war ich wirklich verwirrt über die Verwendung der Tags.JavaScript Angular 1.5.x Controller

Nämlich, ich kann nicht verstehen, warum es ein "globales" Objekt geben muss, um die Variablen in einem Controller zu enthalten.

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

Die Frage ist: Warum können wir Variablen nicht direkt im Controller statt eine globale Aufgabe (in diesem Fall ‚Namensraum‘ genannt) geschaffen rufen zu halten alle Controller-Variablen?

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 } 
    ]; 
    */ 
})

Quelle

2016-11-06 Ricardo Agra

Ich habe einen besseren Weg gefunden, übergeben Sie die $ Scope-Variable an Ihre Funktion Controller und es wird Ihnen einen Namespace geben, die das HTML nach Ihren Variablen sucht.

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

Quelle

2016-11-07 21:11:35

'$ scope.todos' und' this.todos' sind äquivalent - John Papas eckiger Styleguide favorisiert 'this' - siehe https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md# Stil-y031 –

Es kommt grundsätzlich darauf an, wie Funktionsumfang arbeiten in 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

Also, kurz gesagt: Lokale Variablen können nicht von außerhalb der Funktion zugegriffen werden, während Eigenschaften, die an this gebunden sind, können.

Quelle

2016-11-06 16:03:56

macht absolut Sinn, danke! –

Gern geschehen! Ich denke, es macht auch Sinn auf diese Weise, weil Sie so expliziter über das, was Sie wirklich wollen, in der Ansicht vs. was nur eine temporäre Variable ist. –

Oh, und willkommen bei Stack Overflow! Wenn ich Ihre Frage beantwortet habe, markieren Sie diese als akzeptiert, indem Sie auf das Häkchen-Symbol klicken;) –

JavaScript Angular 1.5.x Controller

Antwort

Verwandte Themen